ReactJS

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;

以下是工作请求屏幕：

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 />

中包含组件的路由

在未包含的组件中，您可以像这样导入 withRouter 和导出 withRouter(HomeScreen) 现在您可以访问路由器属性

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

Answer 2

欢迎来到 React 世界。我敢打赌，当您逐渐熟悉 React 可以做的很酷的事情时，您会爱上它的。耐心点，继续练习。

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

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

在路由器方面，我看到你直接从 react-router 导出东西当我们检查 react-router 的 npm 页面（https://www.npmjs.com/package/react-router）时，他们提出以下建议

If you are writing an application that will run in the browser, you should instead install react-router-dom

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

获取更多详细信息并找到更多教程以提高您的技能

让我们看一下 sasha romanov 的代码片段，前提是它基于 react-router-dom 语法

with 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 组件直接传递给我们从 react-router-dom 中提取的 Router 组件。但是，在现实生活中，可能会出现这样的情况，您希望在未传递给 Router 的组件中使用 history 道具，但假设只是一个可重用的按钮组件。对于这些情况，react-router-dom 提供了一个名为 withRouter

的高阶组件

A Higher Order Component是（来自React的官方文档） https://reactjs.org/docs/higher-order-components.html

Concretely, a higher-order component is a function that takes a component and returns a new component.

所以基本上，只要你用 withRouter 包装任何组件，例如 export default withRouter(MyWrappedReusableComponent)，在你的可重用组件中，你将可以访问道具 history，location , pathname

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

在你原来的问题中，你提到了

I am trying to access data gathered from a user on one page and use it on another page

有几个 cases/ways 可以解决这个问题

1) 如果这两个组件完全不相关，你可以使用状态管理系统如Redux, mobx 或者你可以使用React的context API https://reactjs.org/docs/context.html .但是，由于您是 React 的新手，我建议您在熟悉基本流程之前不要处理这些正确的知识。因为在某些时候，尝试使用大量库等实现一个流程是非常困难的。相信我，当我还是 React 的新手时，我尝试过，在打开我的第 100 个浏览器选项卡以从另一个库中寻找另一种方法后，我真的差点弄坏我的电脑

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

我相信你想更新 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>
    );
  }
}

通过这种方式，当您在 WorkReqComponent 中登录 this.props.working; 时，您应该能够显示您传递的数据。您可以将其称为 passing data from parent to child.

我查看了您列出的文章。他们似乎还解释了 parent to child、child to parent 或 between siblings.

之间的数据传输

在你的情况下，你真正需要实现的可以归类为between siblings

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

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

此时，由于您是新手，为了不让自己不知所措，您可以尝试 parent-child-sibling 数据传输主题。一旦您熟悉了实现和逻辑，您就可以逐渐开始查看 React 的上下文 api 和 Redux/mobx.

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

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

ReactJS - Accessing data on Different Pages

javascript

react-props