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

Question

所以我在我的React项目中创建了一个表组件，我用它来显示Teams，Games，Players等等的列表。

我希望这个表有一个单独的组件，并且能够多次重复使用它，因为我想显示不同类型的数据。

问题是我使用Apollo和GraphQL从我的数据库中获取数据，每个查询都有不同的数据名称：例如如果我取得我所有的球队，我会有data.allTeams，但如果我拿到我所有的比赛，我将有data.allGames：

class SectionTable extends React.Component<SectionTableProps, {}> {
  constructor(props: SectionTableProps) {
    super(props);
  }
  render() {
    return (
          <SectionTableQuery query={this.props.query} >
          {({ data: { allTeams = [] } = {}, error, loading }) => {
            if (loading) {
              return <tbody><tr><td>LOADING</td></tr></tbody>
            };
            if (error !== undefined) {
              return <tbody><tr><td>ERROR</td></tr></tbody>
            };
            return (
              <tbody>
                {allTeams.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>
    )
  }
} 

我有一个案例，我想要通过allTeams映射，但在另一种情况下，我想通过allGames映射。

如何更改我的代码以便它可以将数据名称作为参数？

Answer 1

也许简单地发送一个道具来指出要循环的列表是什么

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" />

如果你想拥有不同的行，那么甚至添加一个渲染函数来自定义行