我正在开发一个项目,必须将数据从一个页面传递到另一个页面。
例如,我有data
在第一页上。
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 Router 4。任何建议或帮助都会有帮助。
您可以使用react-router中的Link组件并指定to={}
作为一个对象,您可以在其中指定路径名作为要前往的路线。然后添加一个变量,例如data
来保存你想要传递的价值。请参阅下面的示例。
使用<Link />
成分:
<Link
to={{
pathname: "/page",
state: data // your data array of objects
}}
>
Using history.push()
this.props.history.push({
pathname: '/page',
state: data // your data array of objects
})
使用上述任一选项,您现在可以访问data
在页面组件中的位置对象上,如下所示。
render() {
const { state } = this.props.location
return (
// render logic here
)
}
您可以在另一个示例中查看如何将值与路由一起传递的示例here https://codesandbox.io/s/rywo1xx6xn.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)