reactjs - 如何为元素的所有子元素添加样式

Question

例如，我如何addStyles在此代码段中实现该功能

const addStyles = // ...
const Element = ({ children }) => (
    <div>{children.map(addStyles)}</div>
);

谢谢

Answer 1

使用React.Children.mapfacebook 提供的功能。

将此设置为 thisArg 的子项中包含的每个直接子项调用一个函数。如果 children 是一个键控片段或数组，它将被遍历：函数永远不会被传递给容器对象。如果 children 为 null 或 undefined，则返回 null 或 undefined 而不是数组。

然后使用适当的样式返回每个孩子的克隆，例如使用React.cloneElement. 这将浅层合并第二个参数中对象中提供的任何属性。那些您可以使用它来覆盖当前样式的孩子。如果您愿意，您可以提供{ className: "newClassName" }第二个参数。

const StylishComponent = ({ children }) => {
    const iLikeBlueStyles = { color: "blue" };

    const clones = React.Children.map(children, child => {
        return React.cloneElement(child, { style: iLikeBlueStyles });
    });

    return (
        <div>
            {clones}
        </div>
    );
};