如何在React组件中添加JSON Feed？父子组件传参实现问询

看起来你已经有了清晰的组件结构思路，我帮你把这个接收Feed URL作为props的React组件完整实现出来，完全贴合你说的父子组件分工：

这个组件负责接收父组件传递的Feed URL，处理数据请求、加载状态和错误状态，最终展示联赛信息：

import React, { Component } from 'react';

class LeagueInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoading: true, // 初始设为加载状态
      league: null // 存储获取到的联赛数据
    };
  }

  componentDidMount() {
    // 利用父组件传递的feed props发起请求
    const { feed } = this.props;
    if (!feed) {
      this.setState({ error: '未提供有效的Feed URL', isLoading: false });
      return;
    }

    fetch(feed)
      .then(response => {
        if (!response.ok) {
          throw new Error('请求失败，请检查Feed URL是否有效');
        }
        return response.json(); // 假设Feed返回JSON格式，若为XML需额外处理
      })
      .then(data => {
        this.setState({
          league: data,
          isLoading: false,
          error: null
        });
      })
      .catch(error => {
        this.setState({
          error: error.message,
          isLoading: false
        });
      });
  }

  // 若Feed URL更新，自动重新请求数据
  componentDidUpdate(prevProps) {
    if (prevProps.feed !== this.props.feed) {
      this.setState({ isLoading: true, error: null });
      // 复用请求逻辑，也可以封装成单独方法优化代码
      const { feed } = this.props;
      fetch(feed)
        .then(response => {
          if (!response.ok) {
            throw new Error('请求失败，请检查Feed URL是否有效');
          }
          return response.json();
        })
        .then(data => {
          this.setState({
            league: data,
            isLoading: false,
            error: null
          });
        })
        .catch(error => {
          this.setState({
            error: error.message,
            isLoading: false
          });
        });
    }
  }

  render() {
    const { error, isLoading, league } = this.state;

    if (isLoading) {
      return <div>正在加载联赛信息...</div>;
    }

    if (error) {
      return <div className="error-message">出错了：{error}</div>;
    }

    // 根据实际的Feed数据结构渲染内容，这里示例展示联赛名称和赛事列表
    return (
      <div className="league-info">
        <h2>{league.name || '联赛信息'}</h2>
        <ul>
          {league.matches?.map(match => (
            <li key={match.id}>
              {match.team1} vs {match.team2} - {match.date}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default LeagueInfo;

这个组件作为父容器，接收外部传入的Feed URL props，再传递给子组件LeagueInfo：

import React, { Component } from 'react';
import LeagueInfo from './LeagueInfo';

class LeagueMatch extends Component {
  render() {
    // 接收从index.js传递来的feed props
    const { feed } = this.props;
    return (
      <div className="league-match-container">
        <h1>联赛赛事展示</h1>
        {/* 将feed传递给子组件 */}
        <LeagueInfo feed={feed} />
      </div>
    );
  }
}

export default LeagueMatch;

在应用入口处，将Feed URL作为props传递给LeagueMatch组件：

import React from 'react';
import ReactDOM from 'react-dom/client';
import LeagueMatch from './LeagueMatch';

// 示例Feed URL，替换成你实际的地址
const LEAGUE_FEED_URL = 'https://example.com/api/league-feed';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <LeagueMatch feed={LEAGUE_FEED_URL} />
  </React.StrictMode>
);

一些实用提示：

• 假设Feed返回的是JSON格式，如果是XML格式，你需要额外引入XML解析库（比如xml2js）来处理数据
• 可以根据实际需求调整LeagueInfo的渲染逻辑，完全匹配你的Feed数据结构
• 若偏好函数式组件+Hook的写法，逻辑会更简洁，不过这里按照你给出的类组件结构来实现的

内容的提问来源于stack exchange，提问作者user3853257