ReactJS如何在页面之间传输数据？

Question

我还是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')
);

Answer 1

有几种不同的方法......很好的选择是使用一些状态管理层,如Redux或MobX

一个简单的方法是让您的Main组件将这些数据保存在其状态中,并将其作为props传递给其他页面.由于您使用的react-router,您需要克隆this.props.children你的Main组件添加额外的道具,如数据和设定数据的功能.

您的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>
   }
}

Answer 2

从技术上讲,React创建单个页面应用程序,因此没有其他页面可以传递数据.

但是,我相信你可能在谈论将数据传入components.我总是构建我的应用程序做出反应到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来创建状态变量等.

请注意我的代码摘录使用es6,需要一个babel编译器.我也更喜欢在可能的情况下使用UI组件的功能,因为我认为这是React Way