Question

我让自己对React感到有些困惑。

我有一个主页“页面”，该页面分为多个部分。因此，我有一个hero组件，此组件目前仅具有从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;

我只是想知道这是否是将数据从状态传递到另一个组件的正确方法。看来可行，但这并不代表是正确的。

Answer 1

是的，这是正确的方法。

基本上，在组件之间传递数据时，可以有几种情况，这是典型的“反应方式” ：

<A>是的父级，数据从<A>流到（根据您的情况）：数据存储在A.state中并传递通过道具：
<A>是的父级，数据从流到<A>：数据存储在A.state中，并且侦听器通过props传递： this.updateData(newData)}>
<A>和是亲密兄弟姐妹并共享数据：数据存储在最接近的共同祖先中，侦听器通过道具（也称为lifting the state up）传递
<A>和是独立的并且共享数据：使用类似Redux的状态容器

Answer 2

是的，这是将数据从父/容器组件传递到子组件的正确方法，如果您使用的是redux，则只能添加要存储的父/容器组件的属性，而子/ view组件只能具有显示/显示数据的责任。

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

2 个答案: