我如何添加樣式元素

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> 
    ); 
};