将回调函数作为 prop 传递给 React 组件 – 不那么冗长的方式

Question

我是 React 的新手，所以请耐心等待——如果这个问题已经在某个地方得到回答，我会很高兴。

为了让我的脚湿润，我开始构建一个简单的按钮组件：

const Button = React.createClass({
    render() {
        return(
            <button type="button" onClick={this.onClick}>Hallo Button</button>
        )
    },
    onClick() {
        this.props.onButtonClick()
    },
})

这个按钮组件由我称之为App的另一个组件拥有：

const App = React.createClass({
    render() {
        return (
            <div>
                <h1>Hallo Welt</h1>
                <Button onButtonClick={this.handleButtonClick}/>
            </div>
        )
    },
    handleButtonClick() {
        console.log('Button clicked')
    },
})

看看我如何将App的handleButtonClick()方法作为道具传递给按钮组件。我从官方 React 教程中得到了这个想法。

它有效，因为我是从官方来源获得的，我认为这是很好的做法——但对我来说，这似乎有点麻烦。还有其他方法可以在 React 中传递回调函数吗——也许更短或更不详细？

Answer 1

React Context简化这一点，尽管作者认为显式传递处理程序是一种更好的方法。