ReactJs如何在組件之間傳遞數據

Question

我一直在學習反應，並且正在逐漸加深對如何在組件之間傳遞數據的理解。 簡單來說，似乎有4種情況：

1. 在給孩子的父級傳遞數據中=>使用道具
2. 在父級中從子級中檢索數據=>使用ref並向下傳遞一個函數
3. 在子代中將數據傳遞給父代=>向下傳遞一個函數
4. 在子級中從父級檢索數據

這是我還沒有找到任何指導的第四種情況。 您在一個孩子中，想從父母那里獲取一些沒有作為道具傳遞的數據。 那會發生嗎？

Answer 1

除了context ，您還可以通過回調從父級獲取數據

class Parent extends React.Component {
  render() {
    return <Child update={Math.random} />
  }
}

class Child extends React.Component {
  state = { }

  componentDidMount() {
    this.updateState()
  }

  updateState = () => {
    const { update } = this.props
    this.setState({ something: update() }, () => {
      setTimeout(this.updateState, 1000)
    })
  }

  render() {
    return <div>{this.state.something}</div>
  }
}

這樣做的一個缺點是，子級必須顯式地從父級請求數據（在父級中更改數據不會像在上下文中那樣更新子級）。

另一種方法是使用像redux這樣的全局商店。

class Parent extends React.Component {
  render() {
    return (
      <div>
        <Child />
        <button onClick={ () => this.props.setSomething(Math.random()) }>click me</button>
      </div>
    )
  }
}

// where setSomething is an action creator that changes `globalState.something`
connect(function (state) {
  return { something: state.something }
}, { setSomething })(Child)

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

connect(function (state) {
  return { something: state.something }
})(Child)

Answer 2

第一種情況和第四種情況大致相同，除了子組件從父級提取數據而不是從父級推送數據的情況。 我無法考慮在哪種情況下它會有用。 這似乎是極不可能的情況。 即使我們想要實現它，一種方法是使用函數來附加一個鈎子。