Javascript 提升状态向上：从子组件和向上通信

当我试图从子组件修改基础组件的变量时。我发现我只能通过严格执行以下步骤才能做到这一点：

1：基本组件必须定义一个事件处理程序，严格来说是一个变量

onVariableChange

事件处理程序，并将其分配给本地函数

2：基本组件必须具有自定义属性

variable

，该属性将与上述

onVariableChange

函数链接

3：子组件现在可以调用

this.props.onVariableChange（）

进行适当的修改（从子组件到基组件）

在基本声明中：

changeFn（）{//do Something}

基本渲染：

return <div> <Child variable={this.stateSomeVar} onVariableChange={this.changeFn} />

为什么呢？为什么我们不能在不使用自定义属性的情况下直接从child到base调用自定义函数呢

我是否错误地理解React的文档

基本上：

childFnAnsweredByBase(){
   ...
}
render(){
  return <Child callFromChildFn={this.childFnAnsweredByBase} />
}

childfansweredbybase（）{
...
}
render（）{
返回
}

参考：

当我试图从子组件修改基本组件的变量时 组成部分。我发现我只能通过严格遵守规则才能做到这一点 以下:

我想你指的是可变的、基本的或更精确的父组件状态

1：基本组件必须定义事件处理程序，严格来说是 变量onVariableChange事件处理程序，并将其分配给 局部函数

我不知道你说的“严格”是什么意思，但是为了做到这一点，父母应该有一个处理程序方法。此处的名称并不重要，只需将其正确传递给子组件即可

2:基本组件必须具有自定义属性变量，该变量将 与上述onVariableChange函数链接

此变量或状态属性不需要链接到任何位置，并且您不必将其传递给子组件。如果子组件将使用它，则可以传递，但为了在父组件中更改它，不需要将其传递给子组件

this.props.onVarChange（）

为什么呢？为什么我们不能从child调用自定义函数 不使用自定义属性直接创建基

如果你说的“属性”是指值本身，那么你也不需要把它传递给孩子。但是，如果您的意思是

道具

，那么您应该这样使用，因为此函数是孩子的

道具

的一部分

下面是一个不传递“变量”的示例：

const Child=（道具）=>(
);
类应用程序扩展了React.Component{
状态={
someVar：“初始值”，
}
ChildfAnsweredByBase=事件=>
this.setState（{someVar:event.target.value}）
render（）{
返回(
someVar是：{this.state.someVar}

);
}
}
render（，document.getElementById（“根”））


当我试图从子组件修改基本组件的变量时
组成部分。我发现我只能通过严格遵守规则才能做到这一点
以下:

我想你指的是可变的、基本的或更精确的父组件状态

1：基本组件必须定义事件处理程序，严格来说是
变量onVariableChange事件处理程序，并将其分配给
局部函数

我不知道你说的“严格”是什么意思，但是为了做到这一点，父母应该有一个处理程序方法。此处的名称并不重要，只需将其正确传递给子组件即可

2:基本组件必须具有自定义属性变量，该变量将
与上述onVariableChange函数链接

此变量或状态属性不需要链接到任何位置，并且您不必将其传递给子组件。如果子组件将使用它，则可以传递，但为了在父组件中更改它，不需要将其传递给子组件

this.props.onVarChange（）

为什么呢？为什么我们不能从child调用自定义函数
不使用自定义属性直接创建基

如果你说的“属性”是指值本身，那么你也不需要把它传递给孩子。但是，如果您的意思是
道具
，那么您应该这样使用，因为此函数是孩子的
道具
的一部分

下面是一个不传递“变量”的示例：


const Child=（道具）=>(
);
类应用程序扩展了React.Component{
状态={
someVar：“初始值”，
}
ChildfAnsweredByBase=事件=>
this.setState（{someVar:event.target.value}）
render（）{
返回(
someVar是：{this.state.someVar}

);
}
}
render（，document.getElementById（“根”））

非常详尽和清晰的解释。我在尝试中错过的是，我试图调用
this.props.CallFromChildFn
不是直接从子渲染调用，而是从该子渲染正在调用的函数调用。正如您清楚地解释的，如果我想这样做，我必须首先分配
const localFn=props.CallFromChildFn
。现在我可以在任何地方调用this.localFn。非常感谢你的解释，不客气。事实上，我们不是在
render
方法中调用这个函数，只是使用它的引用。如果
render
方法正在更新状态，请不要调用该方法中的任何函数。如果你这样做，你会得到一个无限循环，明白了。另外，为什么我们必须分配
const localFn=props.CallFromChildFn
？为什么我们不能直接调用
this.props.CallFromChildFn
？或者应该是
道具。CallFromChildFn
？@theMobDog，我更新了我的答案，因为在这里解释这一点很困难：）非常彻底和清晰的解释。我在尝试中遗漏的是，我试图调用
this.props.CallFromChildFn
而不是dir
childFnAnsweredByBase(){
   ...
}
render(){
  return <Child callFromChildFn={this.childFnAnsweredByBase} />
}