javascript - 创建组件时如何以及在何处将 JSON 数据作为 prop 传递

Question

我从 JSON 中获取一些俱乐部信息，我想在我的 React 组件“Club”中使用。我创建了一个组件 ClubList，其中应创建所有具有相应名称的 Club 组件，但我不知道应该在哪里发出 HTTP 请求以及在哪里保存它，因此我可以在 return 语句中使用它。

我尝试将所有标题保存在数组中，但在必须将标题传递给每个 Club 元素时我停了下来。我刚刚开始使用 ReactJS，所以我基本上是 ReactJS 的初学者(尽管不是 JS)。

这是 ClubList 类

class ClubList extends React.Component {

  render() {
      return (
      <div className="Clublist">
        <Club title="Club1" />
        <Club title="Club2" />
        ...
        ...
        ...
      </div>
      )
  }
}

这就是俱乐部类(class)

  class Club extends React.Component {
     clubProp = {...}

     render() {
        return (
           <div className="Club">
              <div className="image-container">
                 <img src={this.clubProp.imageSrc} width="300px" height="300px"/>
              </div>
              <h2>{this.clubProp.name}</h2>
              <div className="Business-information">
                <div className="Business-address">
                    <p>{this.clubProp.address}</p>
                    <p>{this.clubProp.city}</p>
                    <p>{this.clubProp.zipCode}</p>
                </div>
              <div className="Business-reviews">
                    <h3>{this.clubProp.category}</h3>
                    <h3 className="rating">{this.clubProp.rating}</h3>
                    <p>90 reviews</p>
                </div>
            </div>
        </div>
    )
  }
}

我将使用 API 来获取俱乐部名称，但我不知道如何组织变量以便在正确的位置进行访问，因为我不太了解 React 中的作用域是如何工作的。我已经有了准备好 JSON 的代码，只需要知道将其放在哪里以及如何传递值

Answer 1

您的基本语法如下所示。您的组件将使用组件状态维护俱乐部。在 componentDidMount生命周期函数，您可以进行 api 调用，然后将结果存储在组件的状态中。随时调用setState ，您的组件将重新渲染。

class ClubList extends React.Component {
  state = {
    clubs: []
  };

  componentDidMount = async () => {
    const clubs = await this.fetchClubs();
    this.setState({ clubs });
  }

  render() {
    const { clubs } = this.state;
    return (
      <div className="Clublist">
        {clubs.map(club => (
          <Club title={club.title} />
        )}
      </div>
    );
  }
}

最终，您可以从所有组件中提取状态管理并使用类似 redux 的内容。或MobX让您的组件只专注于渲染 html。