将道具传递给 {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

首先，理想的情况是通过像这样的道具渲染 children：

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

渲染 children 作为 prop 函数是可行的，但你应该看一下以确保你的 class children 被正确配置，并且生成的渲染模板有效：

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

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

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

您即将使用 onToggleBooking={this.handleToggleBooking} 传递切换处理程序，但它需要作为组件本身的道具提供，或者 child 您的传递。您可以编辑构造函数以将其包含在您的 props.children 中，但这可能很难调试正确调用 children() prop 作为函数。

将道具传递给 {children()} 以用于子页面的组件

Pass props to {children()} for use in component of child page

javascript

reactjs

gatsby