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作为函数正确调试可能会很麻烦。

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

1 个答案: