React - 在 child 和 hook 之间共享状态

Question

我有一个屏幕 A、一个组件 B 和一个挂钩 C。

屏幕 A 呈现组件 B 并通过挂钩 C 执行其逻辑。

目前，在 B 中，我正在渲染可按下项目的列表：

function FilmCategoriesFilter({ // This is the component B
  defaultSelectedFilter = FILM_CATEGORIES[0],
}) { 
  const [selectedFilter, setSelectedFilter] = useState(FILM_CATEGORIES);
 
  return (
    <PressableList 
      data={FILM_CATEGORIES} 
      selectedItem={selectedFilter} 
      onPressItem={setSelectedFilter} 
    />
  );
}

在我的钩子中 C 我需要接收一个参数 category，它必须与 B 的状态值相同。

我想过将状态从组件移动到父级，并通过回调更新它。但是，如果我这样做，我认为组件 B 将不再可重用。

我的意思是，如果我处理它的状态，使它工作的数据，在它之外，组件将从一个自功能组件转变为一个 UI 组件，它只在屏幕 A.

这是反模式吗？有什么建议吗？

Answer 1

将特定状态的主视图与操作和更改该状态的功能稍微分开是正常的，尤其是当状态也需要在其他组件之间共享时。

对于这种情况，您可以使用一种方法来明确状态直接绑定到组件但也可以在其他地方使用是声明钩子和同一文件中的组件，导出两者，仅此而已。

export const useSelectedFilter = (defaultSelectedFilter = FILM_CATEGORIES[0]) => {
  const [selectedFilter, setSelectedFilter] = useState(FILM_CATEGORIES);
  // put methods that manipulate the state here
  // then return an object with those methods along with the state and setter
  const doSomethingWithSelectedFilter = () => {
    // ...
  };
  return { selectedFilter, setSelectedFilter, doSomethingWithSelectedFilter }; 
};

export function FilmCategoriesFilter({
  selectedFilter,
  setSelectedFilter,
}) {
  return (
    <PressableList 
      data={FILM_CATEGORIES} 
      selectedItem={selectedFilter} 
      onPressItem={setSelectedFilter} 
    />
  );
}
// end of file

这让您可以在父组件中使用 useSelectedFilter，同时绝对清楚 useSelectedFilter 实现主要供 FilmCategoriesFilter 使用的逻辑。由于自定义挂钩，它仍然是模块化和可重复使用的。

React - 在 child 和 hook 之间共享状态

React - Share state between child and hook

javascript

reactjs

react-native