javascript-在React中将状态从一个组件设置为另一个组件的最佳做法

2019-11-08 12:34:26 阅读：221 来源： 互联网

我从最佳实践的角度提出这个问题-我在这里找到的答案是有关单个代码库的更具体问题.如果已被回答,我很高兴被指出正确的方向；如果我尝试的事情被认为不是好的做法,我很乐意被换个方式显示-我可能误解了一些概念…

我正在学习React并正在使用它构建一个简单的应用程序.
主要是为了保持代码整洁,我创建了两个文件.
第一个文件-我从组件内部访问API,并从组件状态渲染一些数据.
第二个文件-我想在第一个文件中使用来自组件状态的相同信息,并在第二个文件中将其用作道具.

下面是一个简化的示例.

第一个文件：

import React, { Component } from 'react';
import SecondComponent from './SecondComponent';

function DisplayFirstData (props) {
  return (
    {props.data}
}

class FirstComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      myData: something,
    }
  }
  render() {
    <DisplayFirstData data={this.state.myData} />
  }
}

第二部分：

import React, { Component } from 'react';

function DisplaySecondData (props) {
  return (
    {props.data}
}

class SecondComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // State object from the first component file
    }
  }
  render() {
    <DisplaySecondData data={this.state.myData} />
  }
}

解决方法:

我不确定您要完成什么,但是我建议两件事：

>由于< DisplayFirstData />和< DisplaySecondData />要执行完全相同的操作,则应将它们移至新文件并将其命名为< DisplayData /> (我说“它”是因为您最终只会得到一个组成部分).无论何时需要,只要做：从’path / to / file导入DisplayData
>现在您有了< DisplayData />组件,将组件包装在< FirstComponent />中和< SecondComponent /&gt ;,将其命名为< ParentComponent />.从< FirstComponent />移动所有状态.到< ParentComponent />.如果您的数据是从其他地方获取的,则也将获取代码也移到其他位置.

之后,您只需要将状态传递给< FirstComponent />和< SecondComponent />.您可以作为道具直接在< SecondComponent />中访问状态.或者您可以通过道具初始化其状态.欲了解更多信息,请阅读this

总体而言,您的代码应如下所示：

import React, { Component } from 'react';
import { FirstComponent, SecondComponent } from 'path/to/folder/contains/the/files';

class ParentComponent extends Component {
  state = {
    //Move your states here
  }
  //Move your fetching code here
  render() {
    const { data } = this.state; 
    return(
      <>
        <FirstComponent data={data} />
        <SecondComponent data={data} />
      </>
    );
  }
}

并在< SecondComponent />中：

import React from 'react';
import DisplayData from 'path/to/file';

export default SecondComponent = props => {
  const { data } = props.data;

  return(
    <DisplayData data={data} />
  )
}

标签：reactjs,javascript
来源： https://codeday.me/bug/20191108/2008128.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-在React中将状态从一个组件设置为另一个组件的最佳做法