Question

我正在创建简单的测试React app。

我有一个充满JS对象的小型数据库。当用户键入查询到搜索栏并按下输入i时，将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处理搜索＆amp;使用Subcomponents的回调显示（在ParentComponent's点击搜索按钮时更改Subcomponent状态，因为提供的道具会从{{1}获取，因此会重新呈现第二个Subcomponent状态（实际上是它的搜索结果）已被更改，因此保存有关ParentComponent's州内搜索和显示信息的数据。

因此单一的事实来源是ParentSubcomponent's州，第一ParentSubcomponent's使用回调来更新搜索结果，第二Subcomponent获取搜索结果（来自州）作为道具和自我更新。

将变量导出为兄弟元素

1 个答案: