提问人：Cocopapoo 提问时间：10/10/2023 更新时间：10/10/2023 访问量：8
React-参数传递-在从子组件调用/使用它到父组件之前，我需要声明参数名称吗？
React-parameter passing-Do I need to declare a parameter name before i call/use it from child component to parent component?
问：
Herer 的 my Parent 和 Child 组件：
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' 方法）中调用？
答：
0赞
Alexander Polyankin
10/10/2023
#1
由于将回调传递给子组件的方式，您的示例将不起作用。这是问题所在：
greetParent(childName) {
// ...
}
render() {
return <ChildComponent greetHandler={this.greetParent}></ChildComponent>
}
this引用在 中丢失，因此调用不会使用预期的 .this.greetParentgreetHandler('child')this
你可以用不同的方式解决它：
- 使用箭头函数
greetHandler={(name) => this.greetParent(name)} - 定义为箭头函数：
greetParent
greetParent = (childName) => {
alert(`Hello ${this.state.parentName} from ${childName}`)
};
这种方式将给出预期的结果。this.state
评论