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()方法作为道具传递给按钮组件。我从official React tutorial获得了这个想法。

它有效，因为我从官方来源得到这个，我认为这是一个很好的做法 - 但对我来说这似乎有点麻烦。有没有其他方法可以在React中传递回调函数 - 可能更短或更简洁？

Answer 1

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

将回调函数传递给React组件作为prop-less冗长的方式？

1 个答案: