Question

如何让onClick={props.****}事件在任何组件中工作，无论是root文件的一部分还是子页面。

例如，下面的handleToggleNewsletter可以通过<Footer/>调用onToggleNewsletter={this.handleToggleNewsletter}，如此处所示......

class Template extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            isNewsletterVisible: false,
        }
        this.handleToggleNewsletter = this.handleToggleNewsletter.bind(this)
    }

    handleToggleNewsletter() {
        this.setState({
            isNewsletterVisible: !this.state.isNewsletterVisible
        })
    }

    render() {
        const { children } = this.props

        return (
            <main id="app" className={`body  ${this.state.isNewsletterVisible ? 'is-newsletter-visible' : ''}`}>
                <div id="wrapper">
                    {children()}
                    <Footer onToggleNewsletter={this.handleToggleNewsletter} />
                </div>
            </main>
        )
    }
}

Template.propTypes = {
    children: PropTypes.func
}

export default Template

然后，通过定义onClick={props.onToggleNewsletter}

的propType，</Footer>事件可以在onToggleNewsletter范围内

Footer.propTypes = {
    onToggleNewsletter: PropTypes.func
}

但是，当组件在Component中工作时，如何在下面的树中看到这项工作？

| -- Template
| | -- {children()} (All Pages)
| | | -- Pages
| | | | -- Component - I WANT THE EVENT TO WORK HERE
| | -- Footer

Answer 1

而不是调用{children()}

让我们这样做

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

这样，您的子组件将会收到另一个名为＆＃34; onToggleNewsletter＆＃34;的道具。你可以使用那个道具并传给大孩子。

上面是一个例子，你必须自己来强化代码，如null或空检查，......

子页面的子组件中的onClick事件

1 个答案: