如何在 ReactJS 中通过 link 传递多个状态

Question

我想为我的下一页传递多个状态，这是我从另一个页面重定向的状态。

一个我已经通过了并且工作正常。

<Link to ={{pathname: "/CreateEventUser", state: { bucket_id: !this.state.selected_bucket.id ? this.state.recent_bucket : this.state.selected_bucket } }} >
 <button type="button" className="btn btn-danger">Create an Event</button>
</Link>

现在我要通过两个状态。它的语法是什么？

<Link to ={{pathname: "/EventDetailsUser", state: { bucket_id: !this.state.selected_bucket.id ? this.state.recent_bucket : this.state.selected_bucket, eventId: event.id}}} >

Answer 1

位置路径名中的 state 参数接受一个对象，因此您可以通过将 then 作为对象传递来传递所需的任意多个值，例如

<Link to ={{
    pathname: "/CreateEventUser", 
    state: { 
        bucket_id: !this.state.selected_bucket.id ? this.state.recent_bucket : this.state.selected_bucket, 
        new_id: this.state.newID, 
        anotherValue: this.state.anotherValue 
    }
   }} >
 <button type="button" className="btn btn-danger">Create an Event</button>
</Link>

Answer 2

方式 1：这是通过 link 状态发送多个状态的方式：发送：

<Link
   to={{
      pathname: "/app/style/form",
      state: {
             item: item,
             styleList: styleList
      },
   }}
>
Go Button
</Link>

这里是您接收数据的方式收到：

let stateData = props.location.state
var styleUpdate = stateData["item"]
var styleList = stateData['styleList']

方式二：您还可以更改要保存状态的变量的名称。（自定义状态名称）发送：

<Link 
    to={{
        pathname: "/app/style/form", 
        styleList: styleList
    }}>
    Go Next
</Link>

收到：

let styleList = props.location.styleList

如何在 ReactJS 中通过 link 传递多个状态

How to pass multiple state through link in ReactJS

reactjs

react-router

react-router-v4