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

Question

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

<Component data = {data} />

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

我确实尝试了以下（只是一个例子）：

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

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

我得到了以下输出：

正如你所看到的，我正在发送一些数据并得到未定义的回报，我之前做过类似的问题，但没有得到正确的答案，也没有找到解决方法。

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

编辑：这就是我想要发送的 ->

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

标签： reactjs

Answer 1

由于您需要在无法发送道具的两个组件之间进行通信。

你有两个选择：

1. 在两个页面（组件）之间使用公共状态。您可以提升状态或使用“非本地”状态，如反应上下文

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

在第一个组件中：

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