Question

因此，我在React Project中创建一个表组件，通过该表组件显示诸如Team，Game，Player等之类的列表。

我希望此表只有一个组件，并且能够重复使用它多次，以显示不同种类的数据。

问题是我使用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" />

如果您希望拥有不同的行，那么甚至添加渲染功能以自定义行

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

1 个答案: