通过道具传递父组件的当前状态给儿童

我有一个非常事件驱动的组件。在这种情况下，它是一个视频标签，它将用播放视频的当前状态更新其状态。为了简单起见，假设它看起来是这样的：通过道具传递父组件的当前状态给儿童

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

在这种情况下，我想将组件的整个状态传递给孩子。我可以做到的一种方式，感觉有点刺激，就是传递一个注入状态并返回一个组件的作为孩子的函数。例如：

{children(this.state)}

凡组件传递的是这样的：

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

但我觉得必须有隐含通过父组件的状态作为道具的方式。 React如何实现？

来源

2017-06-14 corvid

您不能隐式做AFAIK ... – Li357

你可以用'{React.cloneElement（儿童，{...} this.state）}' ？ – Boky

也许你可以尝试用：

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

来源

2017-06-14 15:00:53 Boky

通过道具传递父组件的当前状态给儿童

回答

相关问题