我让自己对 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;

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