Question

所以，我想稍后节省时间，想要做一个动态生成的页面。出于这个原因，我想从对象中读取组件数据，如下所示：

  layout: {
    toolbar: {
      components: [
        {
          type: "Testcomp",
          theme: "default",
          data: "div1"
        },
        {
          type: "Testcomp",
          theme: "pro",
          data: "div2"
        },
      ]}}

组件将被动态导入，启用/激活，除此之外，这是应该动态呈现组件的jsx代码：

render() {
    const toolbarComponents = userSession.layout.toolbar.components.map(Component => (
      <Component.type theme={Component.theme} data={Component.data} key={this.getKey()} />
    ));

    return (
      <div>
        <div className="toolbar">
          toolbar
          {toolbarComponents}
        </div>
    . . .
      </div>
    );
  }

但是我在Chrome的devtool中收到以下警告，也不会显示该组件：

警告：使用的套管不正确。使用PascalCase表示React组件，或使用小写表示HTML元素。

警告：此浏览器中无法识别该标记。如果您要渲染React组件，请使用大写字母开始其名称。

我的代码出了什么问题？

Answer 1

您收到这些错误是因为您没有在此处引用组件本身，而是使用字符串作为名称。所以，也许你需要考虑另一种动态创建组件的方法。就像从基础组件开始，只给它一些道具和数据。

// Define above main component or elsewhere then import.
const MyComponent = ( props ) => <div>{props.data}</div>

// Main component
render() {
  const toolbarComponents = userSession.layout.toolbar.components.map(
    component => <MyComponent theme={component.theme} data={component.data} />
  );

  return <div className="App">{toolbarComponents}</div>;
}

这里我们不再使用类型键了。如果你想使用这样的不同组件，你可以创建每个基本组件，然后使用类型键作为其名称，但不使用字符串，直接引用组件。

React中动态呈现组件的错误套管错误

1 个答案: