修改 Apollo React 函数以使用参数答案

【问题标题】：Modify Apollo React function to use parameters修改 Apollo React 函数以使用参数
【发布时间】：2020-09-21 14:12:44
【问题描述】：

我目前在 React 中使用这个函数：

function GQLFunc() {
  const { loading, error, data } = useQuery(GQLTAGS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  if (data) return <WrappedApp data={data.tag} />;
}

我想通过一个如此尝试的参数使这个函数可重用：

function GQLFunc(callingApp) {
  const { loading, error, data } = useQuery(GQLTAGS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  if (data) return <callingApp data={data.tag} />;
}

然后在这里调用它：

<GQLFunc callingApp={WrappedApp} />

我在这里做错了什么？我还想为data = data.tag添加一个参数

【问题讨论】：

组件名大写
function GQLFunc(props) { let Component = props.callingApp .... return <Component data....
@xadm 是否可以显示更新的代码作为答案？

标签： javascript reactjs apollo

【解决方案1】：

您需要使用大写的渲染组件名称，f.e.:

function GQLFunc(props) {
  const { loading, error, data } = useQuery(GQLTAGS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  let CallingApp = props.callingApp;
  if (data) return <CallingApp data={data.tag} />;
}

【讨论】：