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组件已动态创建。您可能会看到此警告，因为您在另一个组件中调用了样式。要解决此问题，只需在任何渲染方法和函数组件之外创建新的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 />;
  }
};

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

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

1 个答案: