动态导入的 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。 要解决此问题，只需在任何渲染方法和功能组件之外创建新的 StyledComponent。

我在 google 上搜索了警告，但到处都是解决方案，即不在组件中定义样式。 我可能是错的，但我认为这不适用于这里。

这是完整示例： 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 />;
  }
};

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