反应打字稿样式的组件滑块在组件中不起作用

Question

我有一个演示 here

这是一个使用打字稿和样式化组件的简单反应应用程序。

我有一个滑块可以改变红色框的高度。

红色框是一个样式组件，我将高度作为道具传递。

这一切都奏效了，但当我将它全部包围在另一个样式组件中以设置页面样式时，这一切都停止了。

控制台有很多警告，例如

The component styled.div with the id of "sc-dlnjwi" has been created dynamically.
You may see this warning because you've called styled inside another component.
To resolve this only create new StyledComponents outside of any render method and function component.

谁能解释这里发生了什么以及为什么滑块在另一个样式组件中时不起作用

Answer 1

您不能在另一个组件的声明中创建样式化组件。这违背了样式化组件的目的。您也不能在另一个组件中定义任何组件。 React 并不是为处理这种情况而构建的，并且不知道如何跟踪组件。如果您想了解更多关于为什么会这样的信息，您可以查看 VirtualDOM、React 节点树以及它是如何生成的。这是一个复杂的主题，但它的要点是当您创建一个函数式组件时，该函数会返回一个组件树。如果您像以前那样在其他组件中创建组件，它们不会通过它们需要通过的管道来连接到所有内容，并且对象引用会丢失。

相反，将样式化的组件从您的应用组件声明中移出 - 移到它们自己的文件中，甚至移到同一个文件中的其他位置 - 这样就不会有任何问题。

我假设您这样做是因为您需要根据应用组件的状态更改样式。您仍然可以通过将状态作为道具传递给样式化组件来做到这一点。在 styled-components 文档中有一些这样的例子：

https://styled-components.com/docs/basics