Reactjs 通过扩展类从子组件更改父组件的状态

在将其标记为副本之前，请完整阅读问题。

我有两个组件，比如

A

和

B

<代码>A扩展

反应。组件

和

B

扩展

A

。在

B

的

构造函数中调用
super
将使
A
的
下的所有内容也在
B
下可用

我面临的问题是，我有一个方法可以更新
a
的状态。我正在从
B
调用此方法。这仍然会更新
B
而不是
A
的状态。这是意料之中的还是我做错了什么

工作示例


A类扩展了React.Component{
建造师（道具）{
超级（道具）
this.updatedState=this.updatedState.bind（this）//绑定到此父级
此.state={
文字：“你好，从另一边来！”
}
}
updatedState（）{
这是我的国家({
文字：“我一定打了一千次电话！”
})
}
render（）{
返回{this.state.text}
}
}
B类扩展了A类{
构造函数（）{
超级（）
}
render（）{
返回
{this.state.text}
更新状态
}
}
ReactDOM.render(
,
document.getElementById（'app'）
)
您的第二个示例没有按预期工作

class B extends A{
  render(){
    var parent = new A() 
    return <div>
      <h1>{this.state.text}</h1>
      <button onClick={parent.updatedState}>Update state</button>
    </div>
  }
}

B类扩展了A类{
render（）{
var parent=newa（）
返回
{this.state.text}
更新状态
}
}

在上面的例子中，有一个B对象扩展了a

假设B的这个实例引用内存中的地址0x001

var parent=new A（）创建一个A对象，它引用内存中的另一个地址，例如0x002。这个引用保存在为对象B扩展A的实例保留的内存中。就是这样。他们刚刚建立了一种关系。但是B扩展了A（B是A），所以它们有is-A关系

您的第二个示例没有按预期工作

class B extends A{
  render(){
    var parent = new A() 
    return <div>
      <h1>{this.state.text}</h1>
      <button onClick={parent.updatedState}>Update state</button>
    </div>
  }
}

B类扩展了A类{
render（）{
var parent=newa（）
返回
{this.state.text}
更新状态
}
}

在上面的例子中，有一个B对象扩展了a

假设B的这个实例引用内存中的地址0x001

var parent=new A（）创建一个A对象，它引用内存中的另一个地址，例如0x002。这个引用保存在为对象B扩展A的实例保留的内存中。就是这样。他们刚刚建立了一种关系。但是B扩展了A（B是A），所以它们有is-A关系

用A扩展B不会将B的任何新实例链接到A的新实例。此外，请尝试组合而不是继承。在继承中并没有特定的用例是组合所不能涵盖的。构图更自然，更容易推理，行为更明确，也更安全

下面是我如何用作文来做的。我不知道您的用例到底是什么，所以如果下面的重构示例不符合您要实现的目标，请原谅。但无论如何，您应该能够通过组合实现同样的效果，而不必使用继承


A类扩展了React.Component{
渲染（）{
返回{this.props.displayText}
}
}
类扩展了React.Component{
状态={
displayText:“另一边的你好！”
}
不动产（）{
让displayText='我一定打了一千次电话！'；
这是我的国家({
displayText:displayText
}，（）=>this.props.onUpdate单击（显示文本））；
}
渲染（）{
返回
{this.state.displayText}
更新状态
}
}
C类扩展了React.Component{
状态={
displayTextA:“从另一边打招呼！”
}
更改A（值）{
这是我的国家({
displayTextA:值
});
}
渲染（）{
返回(
)
}
}
ReactDOM.render(
,
document.getElementById（'app'）
)
用A扩展B不会将B的任何新实例链接到A的新实例。此外，请尝试组合而不是继承。在继承中并没有特定的用例是组合所不能涵盖的。构图更自然，更容易推理，行为更明确，也更安全

下面是我如何用作文来做的。我不知道您的用例到底是什么，所以如果下面的重构示例不符合您要实现的目标，请原谅。但无论如何，您应该能够通过组合实现同样的效果，而不必使用继承


A类扩展了React.Component{
渲染（）{
返回{this.props.displayText}
}
}
类扩展了React.Component{
状态={
displayText:“另一边的你好！”
}
不动产（）{
让displayText='我一定打了一千次电话！'；
这是我的国家({
displayText:displayText
}，（）=>this.props.onUpdate单击（显示文本））；
}
渲染（）{
返回
{this.state.displayText}
更新状态
}
}
C类扩展了React.Component{
状态={
displayTextA:“从另一边打招呼！”
}
更改A（值）{
这是我的国家({
displayTextA:值
});
}
渲染（）{
返回(
)
}
}
ReactDOM.render(
,
document.getElementById（'app'）
)

这当然是意料之中的。
与
无关。它们是完全独立的组成部分instances@AndrewLi我明白！这是因为
super
将运行父类的
构造函数
，父类构造函数中的所有内容都将作为扩展类的新副本创建。那是ryt吗？你说的创建新副本是什么意思