Question

假设：

let component = [];
switch(foo) {
  case 'bar':
    component  = <TheBarComponent/>
    break;
  case 'baz':
    component  = <TheBazComponent/>
    break;
  case ...
}
// set component properties here.

鉴于switch中的所有组件都具有相同的道具签名，如何在一个地方设置它们而不是在每个case语句中将它们全部插入？

Answer 1

当您使用名称以大写字母开头的<ComponentNameHere>语法时，它是React.createElement(ComponentNameHere);的简写，它创建了一个组件 instance 。实例应该被视为不可变的，所以你不想在之后修改它。

有关详细信息，请参阅JSX In Depth页面。

相反，请记住JSX中的“标记名称”只是一个常规的JavaScript标识符，因此您可以动态设置它，如下所示：

let Component;
switch(foo) {
    case 'bar':
        Component  = TheBarComponent
        break;
    case 'baz':
        Component  = TheBazComponent
        break;
    case ...
}

let myComponent = <Component prop="value" />

Answer 2

您可以尝试使用React.createFactory，

var Main = React.createClass({
  render: function() {
    let component;
    let action = 'bar';

    switch(action) {
      case 'bar':
        component = React.createFactory(TheBarComponent)
        break;
      case 'baz':
        component = React.createFactory(TheBarComponent)
        break;
    }

    component = component({ name: 'test' })

    return <div>
      { component }
    </div>;
  }
});

Example

如何programaticaly添加道具到jsx组件

2 个答案: