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

【问题标题】：Styled Components warning for dynamically imported React components动态导入的 React 组件的样式化组件警告
【发布时间】：2020-09-16 12:40:59
【问题描述】：

我正在从无头 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（检查控制台输出）

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

谢谢

【问题讨论】：

标签： javascript reactjs styled-components

【解决方案1】：

好吧，当它说“在任何渲染方法和函数组件之外创建新的 StyledComponents”时，警告非常清楚。所以你可以做的是将你的功能组件DynamicComponent重构为一个基于类的组件

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

编辑：在您的沙盒上进行了测试，对我之前的代码进行了修复，并且您的警告消失了

【讨论】：