如何正确调用子组件中的传递函数

我有这2个组件，我想知道如何调用传递的函数。因为如果我通过它 - >我有一个孩子的参考，所以当我想要传递一个参数时会出现问题 - 因为它立即调用（这很明显）。如何正确调用子组件中的传递函数

class Parent extends Component { 
    .... 
    fn = (arg) => {console.log(arg)} 
    render(){ 
    return (
     <Child myPassedFn={this.fn}>delete</button> 
    ) 
    } 
} 

class Child extends Component { 
render(){ 
    return (
     <button onClick={this.props.myPassedFn('lul')}>delete</button> 
    ) 
    } 
}

这样

只要成分Child渲染，myPassedFn将执行

所以这是让它发生一个正确的做法？因为我想让认为，你知道，在一个最清晰和正确的方式

class Child extends Component { 

childFn =() => { 
    this.props.myPassedFn('this is how i could pass, you little..') 
} 
render(){ 
    return (
     <button onClick={this.childFn}>delete</button> 
    ) 
    } 
}

来源

2017-04-13 ddeadlink

你可以把它写这样也：

onClick={() => this.props.myPassedFn('lul')}

Onclick除外method的方式，以及你正在使用是，方法调用，它将为return的值。

你也可以使用第二种方式，上面的一行就是简写。

来源

2017-04-13 09:07:55

really appriciate =） – ddeadlink

在'render'内定义匿名函数将使得使用'shouldComponentUpdate'优化儿童渲染变得困难，因为'onClick'道具将在每个渲染中发生变化。更好的方法是在每次组件呈现时使用相同的处理程序来定义'_handleClick'处理程序 – thedude

如何正确调用子组件中的传递函数

回答

相关问题