Reactjs 是否可以使用 React 中的 useState() 钩子在组件之间共享状态

发布于11月24日

我在try React中的新钩子功能.考虑到我有以下两个组件(使用React挂钩)-

const HookComponent = () => {
  const [username, setUsername] = useState('Abrar');
  const [count, setState] = useState();
  const handleChange = (e) => {
    setUsername(e.target.value);
  }

  return (
    <div>
      <input name="userName" value={username} onChange={handleChange}/>
      <p>{username}</p>
      <p>From HookComponent: {count}</p>
    </div>
  )
}


const HookComponent2 = () => {
  const [count, setCount] = useState(999);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Hooks声称可以解决组件之间共享状态逻辑的问题，但我发现HookComponent到HookComponent2之间的状态是不可共享的.例如，HookComponent2中count的变化不会导致HookComponent中的变化.

是否可以使用useState()挂钩在组件之间共享状态？

function Ancestor() { const [count, setCount] = useState(999); return <> <DescendantA count={count} onCountChange={setCount} /> <DescendantB count={count} onCountChange={setCount} /> </>; }

Reactjs 是否可以使用 React 中的 useState() 钩子在组件之间共享状态

推荐答案

1.提升状态

2.背景

3.外部状态管理解决方案

Reactjs相关问答推荐

如何使用React Router创建响应式主详细信息应用程序？

构建next.js项目时状态不变，但在dev服务器中

如何使Reaction Select 选项菜单从选项数组的特定索引开始

Reaction路由-如何在布局路由内呈现&q；/：id&q；路由

在 React 中是否有任何理由要记住 Redux 操作创建者？

.populate() 方法在 mongodb 中不起作用

tRPC/react-query，在所有查询完成之前，组件不会收到任何 useQuery 的结果

拖放 - 将排序保存到数组字段

react ：输入失go 焦点，输入一个字符，

Mui Datepicker 设置了错误的日期

React-dom 的钩子调用无效.我能做些什么？

在 CrafterCMS Studio 中拖动字段

如何在不使用 Axios 的情况下将图像文件从 React.js 发送到 Spring Boot Rest API？

React - 使用 useEffect 还是直接在 onChange 方法中更改值对性能最好？

为嵌套路由配置一个不存在的 url 的重定向

使用dayjs时如何在输入类型日期时间本地字段中设置默认值？

将props 传递给 NextJS 布局组件

Mui CardMedia 的图片组件

在 React 中，为什么不能向空片段添加键(短语法)？

组件焦点上的 MUI 更改栏 colored颜色