Javascript 将道具向下传递给子组件，而不导入子组件

我有这样一个组件：

const Foo = ({ size ) => {
    return <Bar size={size}>
        {children}
    </Bar>

constfoo=（{size）=>{
返回
{儿童}

然后我在

const另一个组件=（）=>{

然后我想使用

中传递给

的

大小

道具，使其子代可以使用，而无需将其显式传递给

---

有没有相应地编辑

的方法使之成为可能？

Foo的实现可以向子对象添加任意数量的属性：

const Foo = ({ size, children }) => {
  return (
    <Bar size={size}>
      {
        React.Children.map(children, (element) => React.cloneElement(element,{size}))
      }
    </Bar>
  );
}

constfoo=（{size，children}）=>{
返回(
{
React.Children.map（Children，（element）=>React.cloneElement（element，{size}））
}
);
}

你可以使用它。@ChrisG是的，这是一个解决方案。但是为了只传递一个支柱，

context

的开销有点太大。我喜欢这种方法，因为使用

context（）

只传递一个道具有点太多了。但是你的建议不起作用。我如何访问子组件中的

size

？孩子们应该能够像其他道具一样使用

props.size

访问

size

。啊，也许我理解错了。试试

React.cloneElement（Element，{size}）

我把它误认为是数组，现在修复了它。

const Foo = ({ size, children }) => {
  return (
    <Bar size={size}>
      {
        React.Children.map(children, (element) => React.cloneElement(element,{size}))
      }
    </Bar>
  );
}