Javascript 通过道具将父组件的当前状态传递给子组件

我有一个非常事件驱动的组件。在这种情况下，它是一个视频标签，它将用播放视频的当前状态更新其状态。为了简单起见，想象一下它是这样的：

export default class VideoPlayer extends Component {
  state = {
    canPlay: false,
    duration: 0,
    position: 0,
  };

  onCanPlay = () => this.setState({ canPlay: true });
  onTimeUpdate = ({ target: { position, duration } }) => this.setState({ position, duration });

  render() {
    const { src, children } = this.props;

    return (
      <div className={styles.container}>
        <video
          src={src}
          onCanPlay={this.onCanPlay}
          onTimeUpdate={this.onTimeUpdate}
        />
        {children}
      </div>
    );
  }
}

其中传入的组件类似于：

{(state) => <Progress {...state} />}

---

但我觉得必须有一种方法将父组件的状态作为道具隐式传递。如何使用React完成此操作？

也许您可以尝试使用：

<div>
   { React.Children.map(this.props.children,
                        child => React.cloneElement(child, {...this.state})
   )}
</div>

---

您不能隐式地完成这项工作，您可以使用{React.cloneElementchildren，{…this.state}吗？

<div>
   { React.Children.map(this.props.children,
                        child => React.cloneElement(child, {...this.state})
   )}
</div>