javascript - 无参数 props 方法不会从 react 中的子组件中调用

Question

我是 React 和 js 新手，我需要一些关于组件中方法绑定(bind)的说明

我有 2 个组件 ParentComponent 和 ChildComponent

父级

var ParentComponent = React.createClass({

methodArg: function (value) {
    console.log("methodArg called", value);
},

methodNoArg: function () {
    console.log("methodNoArg called");
},

render: function () {
    return <ChildComponent m1={(value) => this.methodArg(value)} m2={() => this.methodNoArg} />
}

})

child

var ChildComponent = React.createClass({
render: function () {
    return (
        <div>
            <button onClick={()=>this.props.m1(100)}>Call M1</button>
            <button onClick={()=>this.props.m2()}>Call M2</button>
        </div>
    )
}
})

当我点击调用M1按钮时，父级的methodArg()被调用。

但是当我单击调用 M2 时，methodNoArg() 不会被调用。这有什么问题吗？

当我将 methodNoArg 传递给 Child 时，它被调用

 <ChildComponent m1={this.methodArg()} m2={this.methodNoArg} />

但是 methodArg() 在不单击按钮的情况下被调用，每次渲染子组件时都会调用它。

Answer 1

<button onClick={()=>this.props.m1(100)}>Call M1</button>

上面的行是说评估 m1 方法并将结果分配给 onClick。因此，当您刷新页面时，您传递的值的 console.log 语句将被打印，但无论您单击按钮多少次，它都不会再次被调用，因为 onClick 现在没有分配给它的方法。

您可以通过删除括号来实现您想要的效果，该括号会自动调用该方法，而无需单击。

这是有效的 jsfiddle 代码链接: http://jsfiddle.net/fp0LvkLg/