javascript - 在哪里存储状态以使 React 组件更可重用

Question

我有一个具有以下 Prop 的自动完成组件:

• value(显示文本)，
• onChange(每次击键时触发)
• onSelect(当用户从​​列表中选择某项时触发
  suggestions, passes selected object + display text of the selected object - 同value)

状态: - suggestionsList(我认为它是一种状态，因为它是组件内部的东西)。

在其中一个 View 中，此组件的父级不关心每次击键后的 value。它只关心 onSelect 处理程序传递的选定项。所以在这种情况下，不需要 value 和 onChange Prop 。 value 可以成为自动完成组件的内部状态。

但是在其他 View 之一上， parent 也想知道每个击键。这意味着 parent 需要将 value 保存在他的状态中，并将其作为 props 传递。 onChange Prop 也需要通知 parent 改变其状态。

如何构建自动完成组件以处理这两种情况？哪些属性应该是 Prop ，哪些状态？

任何建议表示赞赏。

Answer 1

在第二种情况下，如果父级需要知道当前的value，它不需要保存变量，所以我猜如果你传递当前的value(来自内部状态变量)作为 onChange prop 函数的参数，父级将注意到更改并相应地更新。

另一种方法是使用 value 属性和内部状态变量。我的意思是:如果父级希望控制 value，它将有一个状态条目并负责更新它，在其他情况下，value 属性必须不提供，因为它将作为常量结束。您的组件每次提供时都将使用此属性作为当前值，父组件应使用 onChange 更新它持有的 va;ue。

您可以在material-ui中查看自动完成组件的源代码。 .