如何将信息存储在 React 组件中。

Question

当我问这个问题的时候，很多疑惑涌上心头。好吧，首先我会给出我的问题描述。

我有组件 X，它包含复选框和搜索框。

在搜索框中输入内容（称之为 search_query）时， X 需要更新匹配 search_query 的复选框。 [请注意，我通过一些 api 调用获得了复选框的所有值。它在组件创建时完成。 ]

我首先想到的是

在组件状态中存储 (search_query) 和（复选框的值）

如果值更多，搜索需要更多时间。

是否可以更改组件内部 props 的值

或者还有其他方法吗？？

Answer 1

因为没有共享代码。假设您使用的是普通 React（没有 Redux，使用了中间件）。

回答您的问题：

[1] 是否可以更改组件内部的 props 值？

在组件内部更改 props 值是一种糟糕的方法。

"All React components must act like pure functions with respect to their props."

[参考：https://facebook.github.io/react/docs/components-and-props.html#props-are-read-only]

此外，如果组件内的 props 值发生变化，视图不会得到更新。

[2] 或者还有其他方法吗？

是（组件内部没有突变）使用 "state" 属性保存值并使用 setState 更新值。

[3] React组件中如何存储信息？

让我们将组件 X 重命名为 FilterData，搜索框 ( SearchBox ) 和复选框 (SelectionBox) 是两个独立的组件。

// Define state to FilterData
class FilterData extends React.Component {
  constructor() {
    super()
    this.state = {
      term: '',
      searchResults: []
    }
  }
  .... 
}

// pass the state values to child components as props
class FilterData extends React.Component {
  .... 
render() {
return (
      <div>
        <SearchBox term={this.state.term}  />
        <SelectionBox options={this.state.searchResults} /> 
      </div>
    )
}
}

在 React 应用程序中，数据自上而下（单向）流动，应该有单一的真实来源。

SearchBox 和 SelectionBox 是两个单独的（同级）组件， SearchBox 的状态有条件（有搜索字符串）当用户输入输入时，SearchBox 将更新其状态并可能检测到更改事件并触发 ajax 并获得响应。

SelectionBox 如何检测已发生的搜索，它如何获取数据。这就是状态被移动到共同祖先 FilterData 的原因。

[参考：https://facebook.github.io/react/docs/lifting-state-up.html]

[参考：https://facebook.github.io/react/docs/state-and-lifecycle.html#the-data-flows-down]

代码示例---------------------------------------- ----------

所选值未保存： https://codepen.io/sudhnk/pen/NgWgqe?editors=1010

所选值已保存： https://codepen.io/sudhnk/pen/JJjyZw?editors=1010

如何将信息存储在 React 组件中。

How to store the information in react component.

reactjs

semantic-ui