Question

我正在做一个项目，我必须将数据从一页传递到另一页。例如，我在首页上有数据

 let data=[
          {id:1,name:'Ford',color:'Red'},
          {id:2,name:'Hyundai',color:'Blue'}
          ]

我的第一个组件页面上，我用名称呈现此数据列表

class ListDetail extends Component {
    constructor();
    handleClick(data){
    console.log(data);
  }
  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <ul>
          {data.map((data,i) => {
            return <li onClick={this.handleClick.bind(this,data)}>{data.name}</li>
          })}
        </ul>
      </div>
    );
  }
}

我想将此数据传递到下一个页面，我需要该数据以及比此更多的数据。我正在使用React Router4。任何建议或帮助都会有所帮助。

Answer 1

您可以使用react-router中的Link组件并将<div id="app"> <ul> <li> item 1 </li> <li> item 2 </li> </ul> </div>指定为对象，并在其中指定路径名作为要到达的路由。然后添加一个变量，例如to={}保留您要传递的值。请参见下面的示例。

使用data组件：

<Link />

使用<Link to={{ pathname: "/page", data: data // your data array of objects }} >

history.push()

使用以上任意一个选项，您现在都可以按照页面组件中的以下内容访问位置对象上的this.props.history.push({ pathname: '/page', data: data // your data array of objects })。

data

在另一个示例here中，您可以看到一个如何将值与路由一起传递的示例。

有关以下内容，可以找到来自React Router文档的更多信息：
Link compoment
history object

状态管理工具。

当您将大量数据/属性传递给其他组件/页面时。您可能要考虑使用库来管理状态。 Redux和MobX这两个受欢迎的地方。

Answer 2

您可以使用react-router的Link组件并执行以下操作：

<Link to={{
  pathname: '/yourPage',
  state: [{id: 1, name: 'Ford', color: 'red'}]
}}> Your Page </Link>

，然后使用this.props.location.state

访问数据

您还可以考虑在整个应用程序（https://redux.js.org/）中使用redux进行状态管理。

Answer 3

如何在 reactjs 中将数据传递到另一个组件路由器

登录.jsx

 handleClickSignIn(){
            console.log("come handle click fun");
            this.props.history.push( {pathname: "/welcome",
            state: { employee:"Steven" }});
      
        }

欢迎.jsx

componentDidMount()
{
  console.log(this.props.location.state.employee);
}

Answer 4

假设您的另一页是组件，则可以将数据作为道具传递，这将在下一页提供。不过要注意一点，您必须使用<Link />中可用的react-router 4组件，而不是使用<a></a>会导致重新加载整个页面从而访问丢失数据的组件。

Answer 5

当你想在一个对象中发送一个页面时，你必须在你的目标文件中导入你的页面，然后在你的目标文件中再次导入你的页面：

import Home from './componenets/home/home';
import ColdDrink from './componenets/coldDrink/coldDrink';
import HotDrink from './componenets/hotDrink/hotDrink';
import CheaseCake from './componenets/cheaseCake/cheaseCake';
import Lost from './componenets/404/lost';

const link = [
{
name   : "Cold Drink",
link   : "/ColdDrink",
router : <ColdDrink/>
},
{
name   : "Hot Drink",
link   : "/HotDrink",
router : <HotDrink/>
},
{
name   : "chease Cake",
link   : "/CheaseCake",
router : <CheaseCake/>
},
{
name   : "Home",
link   : "/",
router : <Home/>
},
{
name   : "",
link   : "",
router : <Lost/>
}
];

并且在您的目标文件中，您必须映射您的对象...

const links = (this.props.link);
{links.map((item, i) => (
  {item.router}
))}

如何在页面之间传递数据以做出反应？

5 个答案: