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

Question

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

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

下面是一个简化的例子。

第一档：

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

Answer 1

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

• 由于<DisplayFirstData />和<DisplaySecondData />执行完全相同的操作，因此您应将它们移动到新文件并将其命名为<DisplayData /> （我说'它'因为您最终只会使用一个组件）。 只要你需要它，只需： import DisplayData from 'path/to/file
• 现在你有了<DisplayData />组件，在<FirstComponent />和<SecondComponent />周围包装一个组件，将它命名为<ParentComponent /> 。 将所有状态从<FirstComponent />到<ParentComponent /> 。 如果您的数据是在其他地方获取的，那么也可以移动提取代码。

之后，您只需将状态传递给<FirstComponent />和<SecondComponent /> 。 您可以直接在<SecondComponent />作为道具访问状态，也可以从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} />
      </>
    );
  }
}

在<SecondComponent /> ：

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

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

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

Answer 2

一种常见的技术是将状态提升到两个组件的第一个共同祖先 ，并将其作为道具传递给两个组件。

例

 function getData() { return new Promise(resolve => setTimeout(() => resolve(42), 1000)); } class FirstComponent extends React.Component { render() { return <div>{this.props.data}</div>; } } class SecondComponent extends React.Component { render() { return <div>{this.props.data}</div>; } } class App extends React.Component { state = { data: null }; componentDidMount() { getData().then(data => { this.setState({ data }); }); } render() { const { data } = this.state; if (data === null) { return null; } return ( <div> <FirstComponent data={data} /> <SecondComponent data={data} /> </div> ); } } ReactDOM.render(<App />, document.getElementById("root")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div> 

Answer 3

正如评论中所指出的，一种常见的技术是将状态提升到两个组件的第一个共同祖先，并将其作为道具传递给两者。

这是你的顶级（父级）组件（一个基于类的组件来保持你的状态），然后通过props将这些数据传递给Children：

import DisplayFirstData from "./DisplayFirstData";
import DisplaySecondData from "./DisplaySecondData";

class App extends Component {
  state = { myData: "something" };
  render() {
    return (
      <div>
        <DisplayFirstData data={this.state.myData} />
        <DisplaySecondData data={this.state.myData} />
      </div>
    );
  }
}

在其中，您将已在状态中初始化的数据传递给您通过prop数据调用<DisplayFirstData />的第二个组件，并将<DisplaySecondData />的数据传递给它

这是你的孩子组成部分1：

const DisplayFirstData = props => (
  <div>
    <h2>Access your data here via props</h2>
    <p>{props.data}</p>
  </div>
);

export default DisplayFirstData;

这是你的孩子组成部分2：

const DisplaySecondtData = props => (
  <div>
    <h2>Access your data here via props</h2>
    <p>{props.data}</p>
  </div>
);

export default DisplaySecondData;

代码框上的一个工作示例......： https ：//codesandbox.io/s/407oq1znx

作为旁注：我不知道为什么你需要2个不同的组件基本上做同样的事情，但无论如何，上面的例子是这样做的方式...而且，在你的学习之旅中，你应该得到了解并喜欢高阶组件模式和上下文API （我怀疑你一直在尝试构建它，你需要它们......）