具有动态类型对象的 ReactJS

Question

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

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

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

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

Answer 1

没有关于哪里你需要这样做的额外信息，我假设你在渲染时需要它，在这种情况下：只需在 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>;
  },
  ...
});

Answer 2

您可以只创建一个对象。

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

然后从中得到一个组件。

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

return <Component />

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

或者这里不要用jsx

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

具有动态类型对象的 ReactJS

ReactJS with dynamic type objects

ruby-on-rails

reactjs