时间戳

首页 > 解决方案 > 当我单击一个链接时，如何更改另一个组件的状态？

reactjs - 当我单击一个链接时，如何更改另一个组件的状态？

问题描述

当我单击一个按钮时，它会将我重定向到另一个组件（#2），其中有两种状态，并根据哪种状态显示一个或另一个内容。组件（#2）的默认状态是 true，我需要知道如何做的是单击组件（#1）的按钮将状态更改为 false。

这是一个 ReactJs 应用程序，我使用函数组件，钩子，没有类组件

Thats the button code:
<Link to="/register">
<button className="btn btn-success btnVerde">
</button>
</Link>

Thats the component#2:
const [state, setState] = React.useState(true);
{state && <div1......../>}
{!state && <div2......./>}

我希望单击组件#1 中的按钮，它重定向到组件#2 默认状态如何为 true，并将其更改为 false

标签： reactjs

解决方案

您可以处理 Component1 中的状态，并在您的 onClick 调用 setState 中使用相反的值更新值，如下所示：

<button onClick={() => setState({state: !state})}>Click</button>

并在 component2 中将值作为道具接收，例如：

const Component2 = ({showCustom}) => showCustom ? <span> Custom </span> : <span>No Custom</span>;

推荐阅读