时间戳

首页 > 解决方案 > 使用 Context API 与 CloneElement 为直接后代传递道具

javascript - 使用 Context API 与 CloneElement 为直接后代传递道具

问题描述

所以，我有两个组件，一个永远是另一个的直系后代。我想将道具从父组件传递给子组件。可能有多个子组件。有两种方法可以实现它。

React.Children.map(children, (child) =>
  React.cloneElement(child, { someProp: 'value' })
)

或使用上下文 API

<Context.Provider value={{ someProp: 'value' }}>
  {this.props.children}
</Context.Provider>

两者都会产生相同的 DOM 结构，但是，Context API 的代码会稍微多一些，并且会产生更多的 React 组件。

那么哪一个更注重性能和推荐。我找不到与此比较相关的任何讨论，因此在这里询问。

标签： javascriptreactjsperformancereact-context

解决方案

上下文 API 的使用对于将数据传递给直接后代似乎有点过分了。

如果孩子知道数据将从父母那里传递（这是通过使用 来推测的<Context.Consumer>），它可以直接使用渲染道具模式，例如：

<Parent>{passedProps => <Child {...passedProps}/>}</Parent>

和

{children({ someProp: 'value' })};

推荐阅读