Javascript ReactJS-访问不同页面上的数据

我试图在一个页面上访问从用户收集的数据，并在另一个页面上使用它。我尝试了以下这些文章：

我一直没能让它工作

this.props.{variableName}

一直作为未定义返回。我的代码如下

以下是主页：

import React, { Component } from 'react';
import {Button} from 'reactstrap';
import { browserHistory } from 'react-router';

class HomeScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      working: "",
    };
  }

  WorkReqNav(){
    this.setState=({working: "WORKING"});
    browserHistory.push("/WorkReq");
  }

  render() {
    return (
      <div>
        <Button size="lg" onClick={this.WorkReqNav.bind(this)} type='button'>HIT IT!</Button>
      </div>
    );
  }
}

export default HomeScreen;

import React，{Component}来自'React'；
从“reactstrap”导入{Button}；
从“react router”导入{browserHistory}；
类主屏幕扩展组件{
建造师（道具）{
超级（道具）；
此.state={
工作：“，
};
}
WorkReqNav（）{
this.setState=（{working:“working”}）；
browserHistory.push（“/WorkReq”）；
}
render（）{
返回(
击中它！
);
}
}
导出默认主屏幕；

以下是workReq屏幕：

import React, { Component } from 'react';
import {Button} from 'reactstrap';

class WorkReq extends Component {
  constructor(props) {
    super(props);
  }

  workCheck(){
    var working = this.props.working;
    alert(working);
  }

  render() {
    return (
      <div>
        <Button size="lg" onClick={this.workCheck.bind(this)} type='button'>HIT IT!</Button>
      </div>
    );
  }
}

export default WorkReq;

import React，{Component}来自'React'；
从“reactstrap”导入{Button}；
类WorkReq扩展组件{
建造师（道具）{
超级（道具）；
}
工作检查（）{
var working=this.props.working；
警惕（工作）；
}
render（）{
返回(
击中它！
);
}
}
导出默认工作请求；

---

如果你还需要什么，请告诉我。我对React非常陌生，这是我第一次尝试这样的事情。

您可以使用React路由器dom lib，从看到您的代码，我认为您在父组件（app.js）中为要访问的每个子组件定义了路由 就像这里的例子：

import { BrowserRouter, Route, Switch } from 'react-router-dom';

<BrowserRouter>
  <div>
    <Switch>
        <Route path="/" component={HomePage} exact />
        <Route path="/homescreen" component={HomeScreen} />
        <Route path="/workreq" render={(props) => <WorkReq {...props} />} /> // here you can pass the props by calling render
        <Route component={NoMatch} />
    </Switch>
  </div>
</BrowserRouter>

从'react router dom'导入{BrowserRouter，Route，Switch}；
}//>//在这里，您可以通过调用render来传递道具

然后，如果您想更改路由，可以调用

this.props.history.push（'/workreq'）

如果在

在未包含的组件中，您可以使用路由器导入，然后使用路由器（主屏幕）像这样导出。，现在您可以访问路由器道具

---

如果这不是您正在寻找的答案，请通知我更新我的答案，我希望这能有所帮助

您可以使用react router dom lib，并从父组件（app.js）中看到您的代码，我认为您为要访问的每个子组件定义了路由 就像这里的例子：

import { BrowserRouter, Route, Switch } from 'react-router-dom';

<BrowserRouter>
  <div>
    <Switch>
        <Route path="/" component={HomePage} exact />
        <Route path="/homescreen" component={HomeScreen} />
        <Route path="/workreq" render={(props) => <WorkReq {...props} />} /> // here you can pass the props by calling render
        <Route component={NoMatch} />
    </Switch>
  </div>
</BrowserRouter>

从'react router dom'导入{BrowserRouter，Route，Switch}；
}//>//在这里，您可以通过调用render来传递道具

然后，如果您想更改路由，可以调用

this.props.history.push（'/workreq'）

如果在

在未包含的组件中，您可以使用路由器导入，然后使用路由器（主屏幕）像这样导出。，现在您可以访问路由器道具

---

如果这不是您正在寻找的答案，请通知我更新我的答案，我希望这能帮助您

欢迎来到React world。我敢打赌，当你逐渐熟悉你能用React做的很酷的东西时，你会喜欢它的。耐心点，继续练习

因此，我要提出的第一个建议是，与任何其他javascript环境一样，React也会发展得非常快。因此，尽管基本原则是相同的，但当您一方面阅读一篇新文章时，另一方面您可以检查所演示的库或方法是否是最新的

系好安全带，让我们根据您的问题和示例中使用的库快速回顾一下

在路由器方面，我看到您直接从

react-router

当我们查看react router的npm页面（）时，他们会提出以下建议

如果正在编写将在浏览器中运行的应用程序，则 应该改为安装react路由器dom

下面的包是哪一个 您可以通过查看官方页面获得更多详细信息并查找更多教程，以提高您的技能

让我们看看sasha romanov提供的基于

react router dom

语法的代码片段

使用以下语法定义路由时，使用

react router dom

<Route path="/" component={HomePage} exact />

有几个案例/方法可以解决这个问题

1） 如果这两个组件完全不相关，则可以使用状态管理系统，例如

Redux

、

mobx

，或者可以使用React的上下文API。然而，由于您是新的反应，我建议不要处理这些正确的知道，直到您对基本流程感到满意。因为在某些情况下，试图实现一个包含大量库等的流是非常困难的。相信我，当我还是新手的时候，我尝试过做出反应，在打开我的第100个浏览器标签，从另一个库中寻找另一种方法后，我真的差点把我的电脑弄坏

2） 您可以实现简单的父子关系来在组件之间传递数据。让我解释一下使用代码片段中的引用是什么意思

我相信您希望更新

工作

，这是

主屏幕中的一种状态

，并且您希望在

WorkReq

组件中传递并使用此更新值

如果我们忽略所有路由逻辑，决定不使用路由，那么您需要做的是

import React, { Component } from 'react';
import {Button} from 'reactstrap';
import { browserHistory } from 'react-router';
import WorkReqComponent from 'path/to/WorkReqDirectory';


class HomeScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      working: "WORKING",
    };
  }

  render() {
    return (
      <div>
        <WorkReqComponent working={this.state.working} />
      </div>
    );
  }
}

import React，{Component}来自'React'；
从“reactstrap”导入{Button}；
从“react router”导入{browserHistory}；
将WorkReqComponent从“path/to/WorkReqDirectory”导入；
类主屏幕扩展组件{
建造师（道具）{
超级（道具）；
此.state={
工作：“工作”，
};
}
render（）{
返回(
);
}
}

这样，当您记录

this.props.working时

在

WorkReqComponent

中，您应该能够显示您传递的数据。您可以将其称为