如何将带参数的函数传递给反应中的子元素并立即调用它？

Question

假设我在父组件中有这个函数，它只是改变了文本格式：

combineName(name) {
    const joinName = name.replace(/\s/g, '');
    return joinName[0].toLowerCase() + joinName.substr(1);
}

然后在我的父组件的 render() 方法中，我有：

render() {
  return (
    <h1 id={this.combineName.bind(this, name)()}>
  )
}

在渲染时立即调用 combineName 函数。这是工作。但是在我的父组件中，我还有一个子组件，如下所示：

<SectionBody
    combineName={this.combineName}
/>

我的问题是如何像在父组件中那样在子组件中使用它？

我是不是直接这样称呼它:

this.props.combineName(param)？

Answer 1

this.props.combineName(param)

这应该很有魅力。

我也希望进行这些更改，我认为您将其绑定到构造函数中，但仍然最好使用自动将其绑定到处理程序的 es6 箭头函数：

  combineName = name => {
    const joinName = name.replace(/\s/g, '');
    return joinName[0].toLowerCase() + joinName.substr(1);
}

Answer 2

是的，你必须这样称呼它

this.props.combineName(param)

Answer 3

这会很好用：

<SectionBody
    combineName={this.props.combineName}
/>

How do I pass a function with parameters to child element in react and immediately invoke it?