將變量導出到同級元素

Question

我正在創建簡單的測試React應用程序。

我有一個裝有JS對象的小型數據庫。 當用戶在搜索欄中鍵入查詢並按Enter時，我會將this.state.form（來自搜索欄的字符串）導出到變量中。 然后，我遍歷數據庫，如果我發現一條記錄的名稱等於表單變量，我想在div中顯示該對象的詳細信息。

但是，此div組件位於另一個同級JS文件中，我無法弄清楚如何有效地將變量及其值導出到同級文件中而無需Redux。

使用偽代碼將是這樣的：

var isFound;
var arrayNumber;

// I iterate through the array of objects with for loop to find correct object and store "i" to arrayNumber and want to export it
// If record is found i set isFound to true, otherwise to false

在一個新文件中，我呈現了一個簡單的div，我要在其中執行以下操作

//if isFound is false
<div>Not found</div>
//if found
<div>database[i].details</div>

Answer 1

嘗試為這兩個組件創建父組件。 例如，現在您的結構像

<Component>
  <Subcomponent />
  <Subcomponent />
  ... other content
</Component>

您應該將其更改為

<Component>
  <ParentSubcomponent>
    <Subcomponent />
    <Subcomponent />
  </ParentSubcomponent>
  ... other content
</Component>

並留給ParentComponent使用Subcomponents回調處理搜索和顯示（更改Subcomponent在搜索按鈕上onClick上Subcomponent ParentComponent's狀態，由於從ParentComponent's狀態（實際上是搜索結果）獲得的支持，這將重新渲染第二Subcomponent ，因此請以ParentSubcomponent's狀態保存有關搜索和顯示信息的數據。

因此，事實的唯一來源將是ParentSubcomponent's狀態，第一ParentSubcomponent's Subcomponent使用回調來使用搜索結果對其進行更新，第二Subcomponent將搜索結果（從狀態）作為道具並進行更新。