将道具传递给{children（）}以在子页面的组件中使用

Question

如何将道具传递到子页面的组件？

我尝试传递的道具是onToggleBooking: PropTypes.func ，它在我的layout.js （根文件）中定义为

lass Template extends React.Component {
constructor(props) {
    super(props)
    this.state = {
        isBookingVisible: false,
    }
    this.handleToggleBooking = this.handleToggleBooking.bind(this)
}

handleToggleBooking() {
    this.setState({
        isBookingVisible: !this.state.isBookingVisible
    })
}

render() {
    const { children } = this.props
    return (
        <main className={`${this.state.isBookingVisible ? 'is-booking-visible' : ''}`}>
            {children()}
        </main>
        )
    }
}

Template.propTypes = {
    children: PropTypes.func
}
export default Template

我想将onToggleBooking={this.handleToggleBooking}道具传递给{children()}以便能够在子页面之一的组件中传递和使用。

为此，我尝试了

{
  children.map(child => React.cloneElement(child, {
    onToggleBooking
  }))
}

但我收到children.map的错误未定义。

Answer 1

首先，最好通过以下道具来渲染孩子：

  render() {
    return <div>{ this.props.children }</div>
  }  

将子级作为prop函数渲染是可行的，但是您应该看一下以确保扩展了子级的类的配置正确，并且生成的渲染模板有效：

class CoolClass extends Component {
  render() {                  
      return this.props.children()
  }
}  

然后在渲染时调用的模板应如下所示：

<CoolClass>
  {() => <h1>Hello World!</h1>}
</CoolClass>  

使用onToggleBooking={this.handleToggleBooking}传递切换处理程序时，您已经很接近了，但是需要将它作为道具本身提供在传递给您的组件或子项上。 您可以编辑构造函数以使其包含在props.children ，但这可能是调试作为函数来正确调用children() prop的痛苦。