在反应中的 2 个组件之间共享数据。无亲子关系

Question

我有 2 个 component 反应。例如 Producer.js 和 Consumer.js. 。他们之间没有parentchild关系

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

中使用该值

我在 google 中搜索并尝试使用 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>

它没有编译。

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

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

<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 钩子更为常见。示例：

const isActive = useContext(Name);

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

return isActive ? "Active": "Inactive"

在反应中的 2 个组件之间共享数据。无亲子关系

sharing data between 2 component in react. no parent child relation

javascript

reactjs

react-redux

react-hooks

react-context