Question

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

https://travishorn.com/passing-data-between-classes-components-in-react-4f8fea489f80

https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17

https://codeburst.io/react-js-pass-data-from-components-8965d7892ca2

我无法使其正常工作。 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;

以下是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;

如果您还需要其他任何信息，请告诉我。我对React真的很陌生，这是我第一次尝试这样的事情。

Answer 1

您可以使用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>

，然后，如果您想更改路线，可以致电this.props.history.push('/workreq')

，如果您没有在<BrowserRouter />

中包含组件的路线，

在未包含的组件中，您可以使用Router导入并像这样withRouter(HomeScreen)导出，现在您可以访问路由器道具

如果这不是您要查找的答案，请通知我更新我的答案，希望对您有所帮助

Answer 2

欢迎来到React世界。我敢打赌，当您逐渐熟悉可以在React上完成的超酷功能时，您会喜欢上它。请耐心等待并继续练习。

因此，我要提出的第一个建议是，就像其他任何JavaScript环境一样，React的发展也非常迅速。因此，尽管基本原理是相同的，但是当您一方面关注新文章，另一方面，您可以检查所展示的库或方法是否是最新的。

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

关于路由器，我发现您直接从react-router导出内容当我们检查react-router的npm页面（https://www.npmjs.com/package/react-router）时，他们提出以下建议

如果您正在编写将在浏览器中运行的应用程序，则您相反，应该安装react-router-dom

以下哪个软件包https://www.npmjs.com/package/react-router-dom 您可以通过查看其官方页面https://reacttraining.com/react-router/web/guides/philosophy

获得更多详细信息并找到更多教程，以提高技能。

让我们看看sasha romanov提供的基于react-router-dom语法的代码片段

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

使用react-router-dom

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

react-router-dom自动将match，location和history道具传递给HomePage组件。因此，console.log()这些道具时，您应该能够在控制台上显示某些内容。而且，一旦您有权使用history道具而不是browserHistory，就可以使用this.props.history.push("/some-route")进行重定向。

让我们看一下与withRouter相关的部分。在上面的示例中，我们可以使用history，因为HomePage组件被直接传递到我们从Router提取的react-router-dom组件中。但是，在现实生活中，可能会出现以下情况：您想在未传递给history的组件中使用Router道具，而只能说是一个可重复使用的按钮组件。对于这些情况，react-router-dom提供了一个名为withRouter

的高阶组件。

一个更高阶的组件是（来自React的官方文档） https://reactjs.org/docs/higher-order-components.html

具体来说，高阶组件是一个需要组件并返回一个新组件。

因此，基本上，每当您将withRouter之类的任何组件包装为export default withRouter(MyWrappedReusableComponent)时，都可以在可重用组件中使用道具history，location，{ {1}}

也就是说，我对您的问题的第一印象似乎与路由器逻辑无关，而是在组件之间交换数据。

在您最初的问题中，您提到了

pathname

有几种情况/方法可以解决此问题

1）如果这两个组件完全不相关，则可以使用状态管理系统，例如I am trying to access data gathered from a user on one page and use it on another page，Redux，也可以使用React的上下文API https://reactjs.org/docs/context.html。但是，由于您是React的新手，所以我建议您在熟悉基本流程之前不要以这些正确的知识来应对。因为在某个时候尝试使用大量的库等实现流是非常压倒性的。相信我，我在还不熟悉React的时候就尝试了，打开第100个浏览器选项卡从另一个库中寻找另一种方法后，我真的快要崩溃了。

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

我相信您希望更新mobx中处于状态的working，并且希望在HomeScreen组件中传递并使用此更新后的值。

如果我们忽略所有路由逻辑并决定不使用路由，则需要执行以下操作

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> ); } }登录到this.props.working;时，您应该能够显示您传递的数据。您可以将其称为WorkReqComponent。

我检查了您列出的文章。他们似乎还解释了passing data from parent to child，parent to child或child to parent之间的数据传输。

根据您的情况，您真正需要实现的功能可以归类为between siblings

我用between siblings为您准备了一个示例，以演示可能产生预期结果的一种可能的结构。 https://codesandbox.io/s/ojp2y0xxo6

在此示例中，状态在称为react-router-dom的父组件内部定义。此外，状态更新逻辑也在父组件内部定义。 App和HomeScreen组件是WorkReq的子代，因此它们是同级。因此，为了在兄弟姐妹之间传输数据，其中一个任务是通过将状态更新逻辑传递给此组件来更新父状态。另一个任务是显示父状态的值。

在这一点上，由于您是新手，为了不让自己感到不知所措，您可以尝试使用App数据传输主题。一旦熟悉了实现和逻辑，就可以逐渐开始查看React的上下文api和Redux / mobx。

如果您对我提供的样品有任何疑问，请告诉我

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

2 个答案: