觸發同級組件之間的狀態更改

Question

總反應菜鳥在這里。 我的React應用程序中有兩個兄弟組件。 當Component B執行某種方法時，我想在Component A顯示“正在加載”消息

我熟悉在React中將狀態從父級傳遞到子級，但是如何通知同級顯示其加載程序？

這是我到目前為止的

export default class ComponentA extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render(){
    return(
      {/* Loader */}
      { this.state.loading === true &&
        <div className="loader"></div>
      }
    )
  }
}

export default class ComponentB extends Component {  
  // Constructor, bindings and stuff...

  getData(){  
    // Update Component A's "loading" state here.
    // Once the data is fetched, set "loading" to false
  }
  render(){
    return(
       <div>
         <button onClick="this.getData"></button>
         <table>
           <tbody>
             {/* ... */}
           </tbody>
        </table>
      </div>
    )
  }
}

將兩個組件都設置為從父組件繼承狀態似乎不是可取的，因為我將與嵌套組件有很多同級，而我也想觸發此加載器

任何輸入表示贊賞！

Answer 1

在React中，數據從上到下流動。 您需要將組件A和B包裹在父對象中， 並將狀態保留在父對象中作為一個事實。

但是，正如您在一段時間后所說的那樣，在處理幾個級別的組件時，這可能變得乏味。 您不需要繼續傳遞狀態。

我建議研究Redux （文檔非常出色）以及container（smart）/ component（dumb）體系結構 。

除了上面的鏈接，我真的建議您花些時間觀看Redux的創建者Dan Abramov的免費教程系列 。

希望有幫助！

Answer 2

首先，您說組件A是組件B的子組件，但是我看不到這兩個組件之間有任何關系。 但是我認為您可以做兩件事之一。 一種是將組件A作為子組件導入組件B，然后將數據作為道具傳遞給組件A（簡單）。 第二種方法要求您了解redux。 在這種情況下，由於應用程序的大小，我認為沒有必要。 但是，基本上，您可以在React組件樹的頂部擁有一個策划者，將狀態傳遞給任何組件。 因此，通過分派來自組件B的新數據來更新存儲，將使組件A能夠訪問該數據。 對於大型應用程序和需要在多個位置分發的數據，Redux會很棒。