ReactJS：如果所有子项都是功能组件，如何为子项添加样式？

Question

我有一个项目，我想在其中应用某种样式。我尝试了下面显示的方法（not 对功能组件起作用）：

const Parent = ({ children }) => {
  const style = { /* ... */ }

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

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

export default Parent;

在我的搜索过程中，我发现这种方法似乎只适用于 class 组件，而不适用于功能组件。这对我来说是个问题，因为整个项目只使用功能组件。

我还发现人们通过向他们的子组件添加一个 style 道具来规避这个问题（在我的例子中，我 cannot 添加一个 style 道具到任何子组件）：

const Child = ({ style }) => {
  return (
    <div style={style}>
      hello world
    </div>
  );
};

export default Child;

这个方法只有在你可以编辑子组件有道具的情况下才有效，但我打算在其他不能编辑子组件的项目中使用这个模块。不幸的是，这个解决方案是不可行的。

编辑：对第 3 和第 4 段添加了更多说明。

Answer 1

当您将 child 传递给 parent 时，您可以看到变化。

see result

export default function App() {
return (
<div className="App">
  <Parent>
    <Child />
  </Parent>
</div>
);
}

Answer 2

只需要将子组件导入到父组件中，并传递样式属性即可

试试这个

import Child from 'path-to-child-file'

const Parent = ({ }) => {
  const style = { /* ... */ }

  return (
    <div>
      <Child style={style} />
    </div>
  );
};

export default Parent;

您不需要编辑您的子组件

Answer 3

也许，映射子项并用具有指定样式的 div 元素包装每个子项就足够了。正如我在对 OP 的评论中所写，这完全取决于所需样式修改的性质和子项的结构：

const App = () => {
  return (
    <div>
      <h1>My App</h1>
      <Parent>
        <ChildComponent />
        <ChildComponent />
      </Parent>
    </div>
  );
};

const Parent = ({ children }) => {
  const style = { color: "blue" };

  const clones = React.Children.map(children, (child) =>
   <div style={style}>{child}</div>
  );

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

const ChildComponent = () => {
  return <h2>this is a child component</h2>;
};
export default App;

ReactJS：如果所有子项都是功能组件，如何为子项添加样式？

ReactJS: How to add a style to children if all children are functional components?

reactjs

react-functional-component