所以我在我的 React 项目中创建了一个表组件,使用它我显示一个列表,如 Team
s、Game
s、Player
s 等。
我希望此表有一个组件,并且能够多次重复使用它,因为我想显示不同类型的数据。
问题是我使用 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
映射。
如何更改我的代码,以便它可以将数据名称作为参数?
也许只是发送一个道具来指出要循环的列表是什么
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" />
如果你想有不同的行,那么甚至添加一个渲染函数来自定义行