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

我还没有反应过来

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

我想这跟道具有关吧？但我不完全确定

“我的主页”有输入/选择标记，用于输入名称、值、用户选择和日期

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

var React=require（'React'）；
var ReactDOM=require（'react-dom'）；
var{Route，Router，IndexRoute，hashHistory}=require（'react-Router'）；
var Main=需要（'Main'）；
var MainPage=require（'MainPage'）；
var About=要求（'About'）；
荷载基础
要求（'style！css！foundation sites/dist/foundation.min.css'）
$（document.foundation（）；
ReactDOM.render(
,
document.getElementById（'app'）
);

创建一个单页应用程序，因此没有其他页面可向其传递数据

但是，我相信您可能正在谈论将数据传递到

组件中。我总是将React应用程序组织到
容器
和
组件
文件夹中。容器文件夹是所有逻辑组件所在的位置，组件文件夹是所有UI组件所在的位置

使React如此直观的一个原因是，您可以通过道具轻松地将数据从父组件传递到子组件。换句话说，我的逻辑组件通过道具将数据传递给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} />
  }
}

export class MyChildComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render(){
    <div>
      {this.props.orgs}
    </div>
  }
}

这只是处理传入数据的一种方法。您还可以在逻辑组件之间进行路由时传入值，或者使用诸如
redux
之类的通量库来创建状态变量，等等

请注意，我的代码摘录使用了es6，需要一个巴别塔
编译器。我还更喜欢在需要时为UI组件使用函数
我相信这是可能的反应方式

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

类主扩展组件{
建造师（道具）{
此.state={
数据：“某些默认数据”，
}
}
更新数据（数据）{
this.setState（{data}）；
}
render（）{
返回
{React.cloneElement（this.props.children，{data:this.state.data，setData:this.updateData}）}
}
}
类主页扩展组件{
render（）{
返回
this.props.setData（{field:e.target.value}）}/>
查看结果
}
}
类DisplayResults扩展了组件{
render（）{
返回
{this.props.data.field}
}
}
您是否阅读过任何React教程？答案可能有点复杂……但基本上您需要创建具有自己路由的组件，并在
props
中或作为全局状态树的一部分将数据传递给它们（例如，如果您使用
redux
）。您可以将属性传递给子组件，正如@user1370384所述，您需要使用flux，redux，mobx…等来正确地完成它。这就是我想要的，非常感谢！：DCool。很高兴能为helpHi@jpdelatorre提供帮助。如何使用功能组件执行相同的操作