javascript - 在 react 中的两个组件之间共享数据。无亲子关系

Question

我有 2 component在 react 。对于前Producer.js和Consumer.js. 。没有parent child他们之间的关系。

我需要在 Producer.js 中设置一个变量并在 Consumer.js 中消耗该值

我在谷歌中搜索并尝试使用 context API但它不起作用。我是新人，所以无法解决这个问题。

所以在 producer.js .

 const Name = createContext(false);
  const [isActive,setIsActive]=useState(false);
  <Name.Provider value={isActive}>
            </Name.Provider>

在consumer.js中我试图消费isActive .

  <Name.Consumer value={isActive}>
        alert(isActive);
    </Name.Consumer>

它没有编译。

它甚至无法识别isActive或value在Consumer.js 。我做错了什么？ 如果有更好的方法也可以提出来。

编辑:-1 我实际上在“菜单”选项卡中有 2 个组件。 用户和 存货。 如果值为 true，我需要显示 User，否则不应显示。

<span >
          <Link to="Inventory">List of Inventory</Link>
 </span>
 <span>
         <Link to="user">List of User</Link>
 </span>

我要<Link to="user"> User</Link>当值为 true 时显示。否则应该是假的。

 <Name.Consumer>
    {value => 
        
      <span className="badge badge-white">
    { value && <Link to="user"> List of Users</Link> }
    </span>
    }
    </Name.Consumer>

.

List of Users显示值是否为 true 的选项卡的false 。如何修改代码？

Answer 1

消费者不会像 prop 那样访问上下文值，而是作为子函数组件进行访问:

Context.Consumer

<MyContext.Consumer>
  {value => /* render something based on the context value */}
</MyContext.Consumer>

对于您的消费者示例，它看起来类似于以下内容:

<Name.Consumer>
  {value => {
    console.log(value);
    return value ? "Active": "Inactive";
  }}
</Name.Consumer>

现在在函数组件中使用 useContext Hook 更为常见。示例:

const isActive = useContext(Name);

useEffect(() => {
  console.log(isActive);
}, [isActive]);

return isActive ? "Active": "Inactive"