将道具传递给`children'而不覆盖显式设置的道具

Question

我想将prop从父级组件传递到其所有children，但前提是尚未在子级上显式设置prop-组件的用户应该能够覆盖传递行为容易。

这与How to pass props to {this.props.children}类似，尽管区别在于我希望“后备”而不是“替代”行为：我希望孩子身上的现有道具优先。

具体来说，我要实现的是一组组件Grid，Grid.Row，Grid.Column，例如

<Grid size="big">  // A
  <Grid.Row>  // B
    <Grid.Column>  // C
      <Grid size="small">  // D
        <Grid.Column>  // E
          ...
        </Grid.Column>
      </Grid>
    </Grid.Column>
  </Grid.Row>
</Grid>

将size从A传递到B到C，再从D传递到E。由于我们在D元素中明确提供了自己的size，所以它不会从C传递到D。

---

方法

我可以想到几种解决此问题的方法。

定义第二个“后备道具”

有了第二个道具（例如fallbackSize），我们可以按照通常的方式通过React.cloneElement无条件设置该道具。然后，子组件首先检查size，如果未定义，则回退到fallbackSize（然后回退到其他情况，如果有的话）。

这让我感到不满意，因为它引入了一个新的道具，该道具实际上并不能代表任何东西，只能解决缺少提供“后备”的好方法。

检查孩子是否存在道具

我不确定这是否可行，但另一个“方法”是照常使用React.Children.map进行映射，但是以某种方式检查子元素是否存在该道具，以及是否存在该道具。 't，按常规方法用React.cloneElement添加。

与以前的解决方案相比，这感觉很干净。但是，它确实需要一种可靠的方式来告诉已渲染的孩子已经拥有了哪些道具，而且我不确定要怎么做（仅检查child.props.propName够了吗？）

依靠新的Context API

React最近（截至2018年中）引入了新的Context API，该API允许在React树的子树中管理状态。这似乎是一个很好的用例，所以我认为这是可行的方法。

也就是说，父级将成为提供程序，在其上下文中提供传递的道具的值，子级将成为相同上下文的使用者，如果未明确传递道具，则回落到此。

>

尽管如此，这里也有一些问题：它增加了一些复杂性，并且我不确定“传递一个道具以使孩子们自动知道它”是否足够小，以至于Context API应该是过度杀伤力。实际上，Context API文档确实提供以下通知：

  

不要仅使用上下文来避免将道具向下传递几级。坚持需要在多个级别的许多组件中访问相同数据的情况。

---

本质上，我想知道最明智和惯用的方法是什么。