在 React 中将状态从一个组件设置为另一个组件的最佳实践方法

我从最佳实践的角度提出这个问题 - 我在这里找到的答案是关于单个代码库的更具体的问题。如果已经得到答案，我很高兴能被指出正确的方向，或者如果我正在尝试的内容不被认为是良好的做法，我很高兴能以另一种方式显示 - 我可能误解了一些概念......

我正在学习 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} />
  }
}

我不太确定你想要完成什么，但我建议两件事：

• Since <DisplayFirstData /> and <DisplaySecondData />做完全相同的事情，你应该将它们移动到一个新文件并命名它<DisplayData />（我说“它”是因为你最终只会得到一个组件）。每当你需要它时，只需执行以下操作：import DisplayData from 'path/to/file
• 现在你拥有了<DisplayData />组件，将组件包裹在您的周围<FirstComponent /> and <SecondComponent />，命名它<ParentComponent />。将所有状态从<FirstComponent /> to <ParentComponent />。如果您的数据是从其他地方获取的，也请移动获取代码。

之后你只需要将状态传递给<FirstComponent /> and <SecondComponent />。您可以直接将状态作为 props 访问<SecondComponent />或者你可以从 props 初始化它的状态。欲了解更多信息，请阅读this https://stackoverflow.com/questions/40063468/react-component-initialize-state-from-props

总的来说，您的代码应该如下所示：

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} />
      </>
    );
  }
}

And in <SecondComponent />:

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

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

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