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

【问题标题】：ReactJS How to transfer data between pages?ReactJS 如何在页面之间传输数据？
【发布时间】：2017-01-31 20:20:02
【问题描述】：

我还是 React 的新手。

我想知道，如何将数据从“主页”传输到另一个页面以显示结果？

我认为这与道具有关？但我不完全确定。

我的主页有输入/选择标签，其中包含名称、值、用户和日期的选择。

我希望能够获取所有这些信息并将其输出到另一个名为“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')
);

【问题讨论】：

你学习过任何 React 教程吗？答案可能有点复杂......但基本上您需要创建具有自己的路由的组件，然后将数据传递给 props 或作为全局状态树的一部分（如果您使用的是 redux ，例如）...
您可以将属性传递给子组件，正如@user1370384 提到的，您需要使用flux、redux、mobx ..etc 才能正确完成。

标签： javascript reactjs

【解决方案1】：

有几种不同的方法...不错的选择是使用一些状态管理层，例如 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>
   }
}

【讨论】：

嗨@jpdelatorre 如何使用功能组件执行相同的操作

【解决方案2】：

从技术上讲，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 这样的通量库来创建状态变量等。

请注意，我的代码摘录使用 es6，需要一个 babel 编译器。我也更喜欢在 UI 组件中使用函数可能，因为我相信这是 React 方式

【讨论】：