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

Question

I have a very event-driven component. In this case, it is a video tag which will update its state with the current state of the playing video. For the sake of simplicity, imagine it looks something like this:

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>
    );
  }
}

In this case, I want to pass the entire state of the component to the child. One way I can do it, which feels somewhat convuluted, is to pass a function as children which injects the state and returns a component. For example:

{children(this.state)}

Where the passed in component would be like:

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

But I feel like there must be a way to pass the state of the parent component implicitly as props. How would this be done with React?

Answer 1

Maybe you can try with:

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