将状态从一个组件传递到另一个组件的正确方法答案

【问题标题】：Correct way to pass state from one component to another将状态从一个组件传递到另一个组件的正确方法
【发布时间】：2019-11-11 09:57:47
【问题描述】：

我对 React 有点困惑。

我有一个主页“页面”，我将其分解为多个组件。所以，我有一个英雄组件，目前只有一个从 mongodb 中提取的标题。

所以，在主页上我有：

import React, { Component } from "react";
// the axios http request to the server
import { getHero } from "../services/heroService";

//state
class Home extends Component {
  state = {
    title: "",
  };

  async componentDidMount() {
    const response = await getHero();
    this.setState({ title: response.data.title });
  }

  render() {
    return (
      <React.Fragment>
        <Hero title={this.state.title} />
    );
  }
}
export default Home;

然后是我的英雄组件：

import React, { Component } from "react";
import { Container } from "react-bootstrap";

class Hero extends Component {
  render() {
    const { title } = this.props;
    return (
      <section className="section-hero d-flex justify-content-center align-items-center mb-5">
        <Container className="text-center text-white">
          <h1>{title}</h1>
        </Container>
      </section>
    );
  }
}
export default Hero;

我只是想知道这是否是将数据从状态传递到另一个组件的正确方法。它似乎有效，但这并不意味着它是正确的。

【问题讨论】：

顺便说一句，像这样的问题更适合 Code Review，Stack Exchange 的另一个网站！

标签： reactjs

【解决方案1】：

是的，这是将数据从父/容器组件传递给子组件的正确方法，如果您使用的是redux，您只能将父/容器组件的props添加到存储中，子/视图组件只能有负责显示/显示数据。

【讨论】：

【解决方案2】：

是的，这是正确的方法。

基本上在组件之间传递数据的时候，可以有几种情况，下面是规范的“React-way”的做法：

<A> 是 的父级，数据从<A> 流向（您的情况）：数据存储在A.state 中，并通过props 传递：
<A>是的parent，数据从流向<A>：数据存放在A.state，通过props传递一个监听器： this.updateData(newData)}>
<A> 和  是近亲并共享数据：数据存储在最近的共同祖先中，侦听器通过 props 传递（又名 lifting the state up）
<A> 和  是独立的并且共享数据：使用像 Redux 这样的状态容器

【讨论】：