reactjs - 如何通过按钮从一个组件解析数据到另一个组件

Question

你好我想知道是否可以将数据从一个组件的按钮解析到另一个组件我知道你可以通过以下方式解析数据:

<Component data = {data} />

但我想通过一个按钮发送它，因为我需要在发送数据时更改“页面”，如果这有意义的话？

我确实尝试了以下(只是一个例子):

const sendData= () => {
    <Component data = {data} />
    history.push("/sendData");
  };

<Button onClick={sendData} >Click to send data</Button>

我得到以下输出的返回:

如您所见，我正在发送一些数据，但返回的是 undefined，我之前做过类似的问题，但没有得到正确的答案，也没有找到解决方法。

欢迎提供任何提示、帮助和文档。

编辑:这就是我要发送的内容 ->

我想将保存该数据的变量中的所有数据发送到另一个页面，以便我可以在那里使用它。

Answer 1

因为您需要在无法发送 props 的两个组件之间进行通信。

你有两个选择:

1. 在两个页面(组件)之间使用共同的状态。您可以提升状态或使用“非本地”状态，如 react 上下文

2. 如果你有 react-router 设置，你也可以像这样在历史位置对象中传递数据，然后使用 useLocation hook 读取它

在第一个组件中:

const location = {
  pathname: '/somewhere',
  state: { fromDashboard: true }
}

<Link to={location}/>
<Redirect to={location}/>
history.push(location)
history.replace(location)

在其他组件中:

let location = useLocation();
let state = location.state ;

这是文档 https://reactrouter.com/web/api/location