动态导入React组件的样式组件警告

Question

从一个无头的CMS中，我正在获取应该包含在某个页面上的组件列表。获取后，我将动态地导入提到的组件，如下所示：

const components = ["Test", "Test2"]; // comes from CMS

const DynamicComponent = ({ name }) => {
   let Component;
   Component = require(`./components/${name}`).default;
   return <Component />;
};

export default function App() {
   return (
      <Container>
         {components.map((comp, i) => (
         <DynamicComponent name={comp} key={i} />
          ))}
      </Container>
   );
}

然后我将这些组件作为子道具传递给某个容器。

然而，尽管一切都运行良好，但对于我拥有的每个组件，我都收到了一些警告：

id为“sc-bdnylx”的组件styled.div已动态创建。您可能会看到这个警告，因为您在另一个组件中调用了styled。要解决这个问题，只能在任何呈现方法和函数组件之外创建新的StyledComponents。

我搜索了一下这个警告，但是所有的解决方案都是不在组件中定义样式。我可能错了，但我不认为这适用于这里。

下面是完整的示例:https://codesandbox.io/s/style-components-dynamic-5id3y？file=/src/app.js（检查控制台输出）

我怎样才能摆脱这个警告？

谢谢你

Answer 1

好吧，当它说“在任何呈现方法和函数组件之外创建新的StyledComponents”时，警告就很清楚了。因此，您可以做的是将功能组件dynamiccomponent重构为基于类的组件

class DynamicComponent extends React.Component {
  constructor(props) {
    super(props);
    this.Component = require(`./components/${this.props.name}`).default;
  }
  render() {
    return <this.Component />;
  }
};

编辑：在你的沙箱上测试，修正了我以前的代码，你的警告消失了