Question

我正在开发一个项目，将一些rails视图层转换为ReactJS。我面临的挑战之一是呈现动态类型的对象列表（对象正在使用STI）。

例如，我正在尝试渲染一袋水果，每个水果都有一个特定的部分视图。在rails中，我会做

fruits.each do |fruit|
  #fruit.type could be orange, apple, banana, etc.
  render 'fruits/' + fruit.type
end

我如何在ReactJS中执行此操作？可能吗？

Answer 1

您可以创建一个对象。

var things = {
   foo: FooComponent, ...
};

然后从中获取一个组件。

var key = 'foo';
var Component = things[key];

return <Component />

请注意，如果您使用的是jsx，则变量必须以大写字母开头，否则它将假设您指的是html元素<component></component>。

或者不要在这里使用jsx。

React.creatElement(things[key], null);

Answer 2

如果没有关于的其他信息，您需要这样做，我假设您在渲染时需要它，在这种情况下：只需在JavaScript中执行相同的操作。

.....React.createClass({
  ...
  getInitialState: function() {
    return {
      fruits: this.props.fruits || []
    };
  },
  ...
  render: function() {
    var fruits = this.state.fruits.map(function(f) {
      return <li>{f.type}</li>;
    });
    return <ul>{fruits}</ul>;
  },
  ...
});

ReactJS与动态类型对象

2 个答案: