Question

我想更新祖父母组件的状态值：

class GrandChild extends React.Component {
  changeNumber() {
    // this.setState(prevState => ({
    //   number: prevState.number + 1 // Add 1
    // }));

    // I want to set the state of the App Component instead of the GrandChild component
  }
  render() {
    return(
      <div>
        <h1>The number is {this.props.number}</h1>
        <button onClick={this.changeNumber}>Increase number by 1</button>
      </div>
    )
  }
}

class Child extends React.Component {
  render() {
    return(
      <div>
        <GrandChild number={this.props.number}/>
      </div>
    )
  }
}

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      number: 1
    }
  }
  render() {
    return (
      <Child number={this.state.number}/>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

我在CodePen中为那些想要测试代码的人编写了代码：https://codepen.io/anon/pen/oEeQdr

我希望有一个简单的解决方案。

提前致谢。

Answer 1

检查下面的工作代码：

import React from 'react';
import ReactDOM from 'react-dom';

class GrandChild extends React.Component {
  render() {
    return (
      <div>
        <h1>The number is {this.props.number}</h1>
        <button onClick={this.props.incNumber}>Increase number by 1</button>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    return (
      <div>
        <GrandChild number={this.props.number} incNumber={this.props.incNumber} />
      </div>
    );
  }
}

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      number: 1
    };
  }
  incrementNumber = () => {
    this.setState({ number: this.state.number + 1 });
  };
  render() {
    return (
      <Child number={this.state.number} incNumber={this.incrementNumber} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Answer 2

class GrandChild extends React.Component {
  changeNumber=()=> {
    this.props.changeNumber();//call parent `changeNumber` method
  }
  render() {
    return(
      <div>
        <h1>The number is {this.props.number}</h1>
        <button onClick={this.changeNumber}>Increase number by 1</button>
      </div>
    )
  }
}

class Child extends React.Component {

  render() {
    return(
      <div>
        <GrandChild number={this.props.number} changeNumber={this.props.changeNumber} /> //passed `changeNumber` as it is to `GrandChild`
      </div>
    )
  }
}

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      number: 1
    }
  }

  changeNumber=()=>{


    this.setState((prevState)=>{
      console.log(prevState);
      return {
        number :  prevState.number + 1
      }
    });
  }
  render() {
    return (
      <Child number={this.state.number} changeNumber = {this.changeNumber}/> //passed `changeNumber` to Child
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

工作codepen

Answer 3

您可以将方法体作为道具发送给Child Class，作为指向它的指针，当您在Child中使用此方法时，它将在Parent中正确执行，其中已声明。

class GrandChild extends React.Component {
      render() {
        return (
          <div>
            <h1>The number is {this.props.passedProps.number}</h1>
            <button onClick={() => 
this.props.passedProps.increaseNumber()}>Increase number by 1</button>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    return (
      <div>
        <GrandChild passedProps={this.props}/>
      </div>
    );
  }
}

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      number: 1
    }
  }

  increaseNumber = () => {
    this.setState({ number: this.state.number + 1 });
  }

  render() {
    return (
      <Child number={this.state.number} increaseNumber={this.increaseNumber}/>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

更新祖父组件的状态

3 个答案: