我如何添加样式元素

Question

例如所有的孩子，我怎么能实现addStyles功能在这个片段中

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

感谢

Answer 1

使用来自Facebook提供的React.Children.map功能。

对包含在此设置为thisArg的子项中的每个直接子项调用一个函数。如果孩子是键控片段或阵列将运行：该功能将永远不会被通过的容器对象。如果children为null或未定义，则返回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> 
    ); 
};