reactjs - 如何将数据传递给子级而不在 props 中指定

Question

最近我们在 React 中获得了 Context 支持。让我们看下一个例子:

<Consumer>{value => <Child value={value} />}</Consumer>

我如何制作一个以相同方式向其子组件发送“值”的组件？我的意思是

<MyComponent>{value => ...}</MyComponent>

Answer 1

您让组件使用渲染 Prop 回调模式，例如

class MyComponent extends React.Component {
   state = {
      value: 'abc'
   }
   render() {
      return React.Children.only(this.props.children)(this.state.value)
   }
}

然后你就可以像这样使用它

<MyComponent>{value => ...}</MyComponent>