Question

如何在没有此开关的情况下调用组件？类似的东西：

<(route.id) navigator={navigator} />

    navigatorRenderScene(route, navigator) {
    switch (route.id) {
      case 'First':
      return <First navigator={navigator} />
      case 'Second':
      return <Second navigator={navigator} />
      case 'Third':
      return <Third navigator={navigator} />
    }
  }

Answer 1

这是一个示例解决方案

const FIELD_MAPPING = {
  First,
  Second,
  Third,
};


render() { 
  const ComponentField = FIELD_MAPPING[route.id] || DefaultComponentField;

  return <ComponentField navigator={navigator} />;
}

注意：动态组件名称，例如

const MyComponent = 'First'

return <MyComponent />

是不可能的，因为

return <MyComponent />

编译到

return React.createElement(MyComponent, options);

大写类型表示JSX标记指的是React组件。这些标记被编译成对命名变量的直接引用，因此如果使用JSX表达式，则Foo必须在范围内。

否则，类型是字符串或非大写变量，并解释为HTML标记。

React.createElement('div', options);

相当于

const tag = 'div';
React.createElement(tag, options);

如何通过参数调用组件？

1 个答案: