Question

在将其标记为重复之前，请完整阅读该问题。

我有两个组件，比如A和B。 A扩展React.Component，B扩展A。在super的{{1}}内拨打constructor会使B this A下的所有内容都可以在B下使用。

我面临的问题是，我的方法是更新A的状态。我是从B调用此方法的。这仍然会更新B而不是A的状态。这是预期还是我做错了什么。

工作示例

＆＃13;

class A extends React.Component{
  constructor(props) {
    super(props)
    this.updatedState = this.updatedState.bind(this) //bound to this parent
    this.state = {
      text: 'Hello from the other side!'
    }
  }
  
  updatedState(){
    this.setState({
      text: 'I must have called a thousand times!'
    })
  }
  
  render(){
    return <h1>{this.state.text}</h1>
  }
}

class B extends A{
  constructor(){
    super()
  }
  
  render(){
    return <div>
      <h1>{this.state.text}</h1>
      <button onClick={this.updatedState}>Update state</button>
    </div>
  }
}

ReactDOM.render(
  <div>
    <A/>
    <B/>
  </div>,
  document.getElementById('app')
)

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

＆＃13;

另一个例子

这不是使用constructor或super。我使用A实例化new并调用方法。正在调用该方法，但不会触发渲染。

＆＃13;

class A extends React.Component{
  constructor(props) {
    super(props)
    this.updatedState = this.updatedState.bind(this) //bound to this parent
    this.state = {
      text: 'Hello from the other side!'
    }
  }
  
  updatedState(){
    console.log('called')
    this.setState({
      text: 'I must have called a thousand times!'
    })
  }
  
  render(){
    return <h1>{this.state.text}</h1>
  }
}

class B extends A{
  render(){
    var parent = new A() 
    return <div>
      <h1>{this.state.text}</h1>
      <button onClick={parent.updatedState}>Update state</button>
    </div>
  }
}

ReactDOM.render(
  <div>
    <A/>
    <B/>
  </div>,
  document.getElementById('app')
)

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

＆＃13;

Answer 1

你的第二个例子不能正常工作。

/tmp/0303393

在上面有一个B对象延伸A.

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

var parent = new A（）创建一个A对象，它引用内存中的另一个地址，例如0x002。该引用保存在存储器中，该存储器例如保留对象B的扩展A.它是它。他们只有 - 一个关系。但是B扩展了A（B是A）所以他们有一种关系。

http://www.w3resource.com/java-tutorial/inheritance-composition-relationship.php

Answer 2

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

在这里，我将如何通过构图来做到这一点。我不知道你的用例究竟是什么，所以请原谅我，如果以下重构的例子不符合你想要完成的事情。但是，你应该能够用组合实现相同的功能，而不必使用继承。

＆＃13;

class A extends React.Component {
  render () {
    return <h1>{this.props.displayText}</h1>
  }
}

class B extends React.Component {
  state = {
    displayText: 'Hello from the other side!'
  }
  
  updateState () {
    let displayText = 'I must have called a thousand times!';
    this.setState({
      displayText: displayText
    }, () => this.props.onUpdateClick(displayText));
  }
  
  render () {
    return <div>
      <h1>{this.state.displayText}</h1>
      <button onClick={this.updateState.bind(this)}>Update state</button>
    </div>
  }
}

class C extends React.Component {
  state = {
    displayTextA: 'Hello from the other side!'
  }
  
  changeA (value) {
    this.setState({
      displayTextA: value
    });
  }
  
  render () {
    return (
      <div>
        <A displayText={this.state.displayTextA} />
        <B onUpdateClick={this.changeA.bind(this)} />
      </div>
    )
  }
}

ReactDOM.render(
  <div>
    <C/>
  </div>,
  document.getElementById('app')
)

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

＆＃13;

以下是您可能会发现有用的一些帖子： -

通过扩展类来更改Child组件中父组件的状态

2 个答案: