Javascript ReactJS 如何在页面之间传输数据？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41966762/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ReactJS How to transfer data between pages?
提问by Vincent Goh
I'm still new to React.
我还是 React 的新手。
I was wondering, how do I transfer data from let's say "Main Page" to another page to display the results?
我想知道，如何将数据从“主页”传输到另一个页面以显示结果？
I think it has something to do with props? But I'm not entirely sure.
我觉得跟道具有关系？但我不完全确定。
My MainPage has input/select tags that takes in name, value, selections from user and dates.
我的 MainPage 有输入/选择标签，可以输入名称、值、来自用户和日期的选择。
I want to be able to grab all those information and output it in another page called "DisplayResults" and maybe use the data for other things, maybe create a table with the information.
我希望能够获取所有这些信息并将其输出到另一个名为“DisplayResults”的页面中，并且可能将数据用于其他用途，或者创建一个包含信息的表格。
Thanks very much for your help!
非常感谢您的帮助！
This is my app.jsx
这是我的 app.jsx
var React = require('react');
var ReactDOM = require('react-dom');
var {Route, Router, IndexRoute, hashHistory} = require('react-router');
var Main = require('Main');
var MainPage = require('MainPage');
var About = require('About');
// Load foundation
require('style!css!foundation-sites/dist/foundation.min.css')
$(document).foundation();
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={Main}>
<Route path="about" component={About}/>
<IndexRoute component={MainPage}/>
</Route>
</Router>,
document.getElementById('app')
);
回答by jpdelatorre
There are a few different ways... Good option would be to use some state management layer like Redux or MobX
有几种不同的方法......不错的选择是使用一些状态管理层，如 Redux 或 MobX
A simple one is to have your Maincomponent save those data in its state and pass it to the other pages as props. Since you're using react-routeryou'll need to clone the this.props.childrenin your Maincomponent to add the additional props like the data and the function that sets the data.
一个简单的方法是让您的Main组件将这些数据保存在其状态中，并将其作为道具传递给其他页面。由于您正在使用，react-router您需要this.props.children在您的Main组件中克隆以添加额外的道具，如数据和设置数据的函数。
Your Maincomponent would probably look something like
您的Main组件可能看起来像
class Main extends Component {
constructor(props) {
this.state = {
data: 'some default data',
}
}
updateData(data) {
this.setState({ data });
}
render() {
return <div>
<Header />
{React.cloneElement(this.props.children, { data: this.state.data, setData: this.updateData })}
</div>
}
}
class MainPage extends Component {
render() {
return <div>
<input type="text" onChange={e => this.props.setData({ field: e.target.value })} />
<Link to="/DisplayResults">Go to Results</Link>
</div>
}
}
class DisplayResults extends Component {
render() {
return <div>
{this.props.data.field}
</div>
}
}
回答by Turtle
Technically React creates a single page application, therefore there is no other page to pass data to.
从技术上讲，React 创建了一个单页面应用程序，因此没有其他页面可以传递数据。
However, I believe you might be talking about passing data into components. I always structure my React applications into containerand componentfolders. The container folder is where all the logic components are located, and the component folder is where all the UI components are located.
但是，我相信您可能正在谈论将数据传递到components. 我总是构建我的应用程序做出反应到container和component文件夹。容器文件夹是所有逻辑组件所在的位置，组件文件夹是所有 UI 组件所在的位置。
One of the things that makes React so intuitive is that you can easily pass data from parent components to children components via props. In other words, my logic components pass data to the UI components via props.
让 React 如此直观的一件事是，您可以轻松地通过 props 将数据从父组件传递到子组件。换句话说，我的逻辑组件通过 props 将数据传递给 UI 组件。
For example suppose I want my logic component called Dashboard to pass organization data to my UI component MyChildComponent, I would do something like this:
例如，假设我希望名为 Dashboard 的逻辑组件将组织数据传递给我的 UI 组件MyChildComponent，我会执行以下操作：
containers/DashBoard/index.js
containers/DashBoard/index.js
export class DashBoard extends React.Component { // eslint-disable-line react/prefer-stateless-function
constructor(props) {
super(props);
this.state = {
organizations: null,
};
this.rowCallback = this.rowCallback.bind(this);
}
render() {
<MyChildComponent orgs={this.state.organizations} />
}
}
components/MyChildComponent/index.js
components/MyChildComponent/index.js
export class MyChildComponent extends React.Component {
constructor(props) {
super(props);
}
render(){
<div>
{this.props.orgs}
</div>
}
}
This is just one way to handle passing in data. You could also pass in values while routing between logic components, or use a flux library like reduxto create state variables, etc..
这只是处理传入数据的一种方式。您还可以在逻辑组件之间路由时传入值，或者使用通量库redux来创建状态变量等。
Please note that my code excerpts make use of es6, and needs a babel compiler. I also prefer using functions for UI components when possible as I believe that is the React Way
请注意，我的代码摘录使用了 es6，并且需要一个 babel 编译器。我也更喜欢在可能的情况下为 UI 组件使用函数，因为我相信这是 React 的方式
