Reactjs 使apollo查询组件在React中可重用

所以我在我的React项目中创建了一个表组件，通过它我可以显示一个列表，比如团队、游戏、玩家等等

我希望这个表只有一个组件，并且能够重复使用它，就像我希望显示不同类型的数据一样

问题是，我使用Apollo&GraphQL从我的数据库中获取数据，每个查询都有不同的数据名称：例如，如果我获取我所有的团队，我将拥有数据。所有团队，但如果我获取我所有的游戏，我将拥有数据。所有游戏：

一种情况下，我想在所有球队之间绘制地图，但另一种情况下，我想在所有比赛之间绘制地图

---

如何更改代码，使其可以将数据名作为参数

发送一个道具来指出要循环的列表可能很简单

class SectionTable extends React.Component<SectionTableProps, {}> {
  ...
  render() {
    const { listName, query } = this.props;
    return (
      <SectionTableQuery query={query}>
        {({ data = {}, error, loading }) => {
          if (loading) {
            ...
          }
          if (error !== undefined) {
            ...
          }
          return (
            <tbody>
              {(data[listName]||[]).map(elem => (
                <tr key={elem.id}>
                  <th scope="row">{elem.id}</th>
                  {Object.keys(elem).map((k, i) => {
                    if (k !== 'id' && k !== '__typename') {
                      return <td key={elem[k]}>{elem[k]}</td>;
                    }
                  })}
                </tr>
              ))}
            </tbody>
          );
        }}
      </SectionTableQuery>
    );
  }
}
<SectionTable query={...} listName="allTeams" />
<SectionTable query={...} listName="allGames" />

---

如果你想拥有不同的行，那么添加一个渲染函数来定制行实际上是可行的，但我现在也会遇到一些打字错误哈哈，一旦我发现了这些，我想这将是完美的：谢谢

class SectionTable extends React.Component<SectionTableProps, {}> {
  ...
  render() {
    const { listName, query } = this.props;
    return (
      <SectionTableQuery query={query}>
        {({ data = {}, error, loading }) => {
          if (loading) {
            ...
          }
          if (error !== undefined) {
            ...
          }
          return (
            <tbody>
              {(data[listName]||[]).map(elem => (
                <tr key={elem.id}>
                  <th scope="row">{elem.id}</th>
                  {Object.keys(elem).map((k, i) => {
                    if (k !== 'id' && k !== '__typename') {
                      return <td key={elem[k]}>{elem[k]}</td>;
                    }
                  })}
                </tr>
              ))}
            </tbody>
          );
        }}
      </SectionTableQuery>
    );
  }
}
<SectionTable query={...} listName="allTeams" />
<SectionTable query={...} listName="allGames" />