更改子组件中的状态是否也会更改其父组件中的状态？

Question

因此，我对此表示怀疑。

在这个项目中，我需要按照标题所述计算费用。现在，我决定将其分为4个组件，现在分别命名为组件1（例如NetBalance），组件2（HistoryCollection），组件3（IndividualHistory）和组件4（NewTransaction）。现在我不知道redux或上下文API，所以我打算将状态保持在App.js级别，仅因为在这里我的所有组件都需要访问该状态。现在我的问题是，如果子组件中的状态发生了变化，比如说在第4个组件中（NewTransaction一个），那么它会更改该组件中的状态，并由于状态更改而重新渲染第4个组件，但是这样做更改其父组件中的状态，比如说NetBalance组件？ 我知道，如果我的状态在父级组件中发生了变化，那么它的子级也将被重新渲染，因为我会以道具的身份通过那个状态。但是，否则会发生吗？ 我认为这不应该诚实，因为反应遵循一种数据流方式。因此，更改后的数据不应在树中向上传播。 但是，如果我错了，并且它确实向上流动，那么它是否违反了自己的单向数据传输规则？ 顺便说一句，它们都共享相同的状态，该状态位于app.js组件中，并且该状态的值可以说（userIncome）作为props其子组件的传递。

Answer 1

答案是否定的。每个组件都有其自己的状态。如果您想更新父组件的状态，则需要将方法向下传递给子组件，以作为支持。

提升状态

通常，几个组件需要反映相同的变化数据。我们 建议将共享状态提升到最接近的共同点 祖先。

反应文档：https://reactjs.org/docs/lifting-state-up.html

示例：https://codesandbox.io/s/competent-bohr-yqzbd?file=/src/App.js

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null
    };
  }
  liftState = (state) => {
    this.setState(state);
  };
  render() {
    return (
      <div className="App">
        <Child liftState={this.liftState} value={this.state.value} />
      </div>
    );
  }
}

function Child(props) {
  return (
    <div>
      <div>Parent value: {props.value}</div>
      <button onClick={() => props.liftState({ value: 5 })}>
        Update Parent's State
      </button>
    </div>
  );
}

Answer 2

这是一个例子...

父母：

class Parent extends Component {
  constructor(props) {
    super(props)
    
    this.state = {
      value: 0
    }
  }

  incrementValue = () => {
    this.setState({value: this.state.value + 1})
  }

  render() {
    return <Child value={this.state.value} incrementValue={this.incrementValue} />
  }
}

孩子：

class Child extends Component {
  render() {
    return <button onClick={this.props.incrementValue}>{this.props.value}</button>
  }
}

为了使孩子能够更改道具传递的状态，它必须接收一个包含 this.setState（）作为道具的函数。