[英]ReactJS How to transfer data between pages?
我还是React的新手。
我想知道,如何将数据从让我们说“主页”转移到另一页以显示结果?
我认为它与道具有关? 但我不完全确定。
我的MainPage具有输入/选择标记,其中包含名称,值,用户和日期的选择。
我希望能够获取所有这些信息并将其输出到另一个名为“DisplayResults”的页面中,并可能将数据用于其他内容,也许可以创建一个包含该信息的表。
非常感谢您的帮助!
这是我的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')
);
有几种不同的方法......很好的选择是使用一些状态管理层,如Redux或MobX
一个简单的方法是让您的Main
组件将这些数据保存在其状态中,并将其作为道具传递给其他页面。 由于您正在使用react-router
您需要克隆Main
组件中的this.props.children
以添加其他道具,例如数据和设置数据的函数。
您的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>
}
}
从技术上讲,React创建单个页面应用程序,因此没有其他页面可以传递数据。
但是,我相信您可能正在谈论将数据传递到components
。 我总是将我的React应用程序构建到container
和component
文件夹中。 容器文件夹是所有逻辑组件所在的位置,组件文件夹是所有UI组件所在的位置。
使React如此直观的一个原因是,您可以通过props轻松地将数据从父组件传递到子组件。 换句话说,我的逻辑组件通过props将数据传递给UI组件。
例如,假设我希望我的逻辑组件Dashboard将组织数据传递给我的UI组件MyChildComponent
,我会这样做:
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
export class MyChildComponent extends React.Component {
constructor(props) {
super(props);
}
render(){
<div>
{this.props.orgs}
</div>
}
}
这只是处理传入数据的一种方法。 您还可以在逻辑组件之间路由时传入值,或者使用redux
库(如redux
来创建状态变量等。
请注意我的代码摘录使用es6,需要一个babel编译器。 我也更喜欢在可能的情况下使用UI组件的功能,因为我认为这是React Way
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.