React-参数传递-在从子组件到父组件调用/使用它之前是否需要声明参数名称？

Question

这是我的父组件和子组件：

class ParentComponent extends Component {
    constructor(props) {
      super(props)
    
      this.state = {
         parentName: 'Parent'
      }
      this.greetParent = this.greetParent.bind(this)
    }
        // define a method call 'greetParent'
        greetParent(childName){
            alert(`Hello ${this.state.parentName} from ${childName}`)
        }
    
  render() {
    return (
      <div>
        <ChildComponent greetHandler={this.greetParent}></ChildComponent>
      </div>
    )
  }
}

function ChildComponent(props) {
  return (
    <div>
      <button onClick={() =>props.greetHandler('child')}>Greet Parent</button>
    </div>
  )
}

问题： 我想知道在从子组件到父组件调用/使用它之前是否需要声明一个参数名称（在“greetParent”方法中）？ 我是否只需设置任何参数值（在本例中：ChildComponent 中的“child”），它就会在 ParentComponent 中自动调用（“greetParent”方法）？

Answer 1

由于您将回调传递给子组件的方式，您的示例将无法工作。这就是问题：

greetParent(childName) {
  // ...
}

render() {
  return <ChildComponent greetHandler={this.greetParent}></ChildComponent>
}

this

引用在

this.greetParent

中丢失，因此调用

greetHandler('child')

将不会使用预期的

this

。

你可以用不同的方式解决它：

1. 使用箭头功能

   greetHandler={(name) => this.greetParent(name)}

2. 定义

   greetParent

   为箭头函数：

greetParent = (childName) => {
  alert(`Hello ${this.state.parentName} from ${childName}`)
};

这样

this.state

就会得到预期的结果。