親コンポーネントの現在の状態を小道具を介して子に渡す

Question

私は非常にイベント駆動型のコンポーネントを持っています。この場合、再生中のビデオの現在の状態で状態を更新するビデオタグです。私は子供へのコンポーネントの全体の状態を渡したい、この場合

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

：単純化のために、それは次のようになります想像してみてください。私がそれをやり遂げることのできる方法の1つは、幾分抱かれているように感じますが、状態を注入してコンポーネントを返す子としての機能を渡すことです。例：コンポーネントに渡された

{children(this.state)} 

は次のようになります：

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

でも小道具として暗黙的に親コンポーネントの状態を渡す方法がなければならないような気がします。これはどのようにしてReactで行われますか？

Answer 1

たぶん、あなたが試すことができます：

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