reactjs - 在 TSX 组件内使用 JSX 组件无法编译而不抛出错误

Question

所以我调用了一个 typescript-react 组件 ContractExpenses，我在其中使用了一个名为 DynamicSelector 的 JSX 组件，但是我收到如下错误

这是我的<DynamicSelector/>组件的代码

const DynamicSelector = ({ query, variables, ...staticSelectorProps }) => {
  const { data, loading, error } = useQuery(query, { variables });
  if (error) return null;
  let list = [];
  if (data) {
    const key = Object.keys(data)[0];
    list = get(data, key, []);
  }
  return (
    <StaticSelector loading={loading} items={list} {...staticSelectorProps} />
  );
};

export default DynamicSelector;

有什么办法，我可以避免这样的错误，使用打字稿让我很生气，因为我必须将所有孩子（和他们的孩子！）转换为打字稿

Answer 1

你可以让你的variables道具可选，比如给它一些默认值。

const DynamicSelector = ({ query, variables = {}, ...staticSelectorProps }) => {
  const { data, loading, error } = useQuery(query, { variables });
  if (error) return null;
  let list = [];
  if (data) {
    const key = Object.keys(data)[0];
    list = get(data, key, []);
  }
  return (
    <StaticSelector loading={loading} items={list} {...staticSelectorProps} />
  );
};

export default DynamicSelector;

因为Typescript希望您传递variablesProp ，所以要么传递它，要么将其设置为默认值，或者通过创建接口使其成为可选。

像这样

export interface DynamicSelectorProps {
  query: any;
  variables?: any;
}


const DynamicSelector: FC<DynamicSelectorProps> = ({ query, variables, ...staticSelectorProps }) => {
  const { data, loading, error } = useQuery(query, { variables });
  if (error) return null;
  let list = [];
  if (data) {
    const key = Object.keys(data)[0];
    list = get(data, key, []);
  }
  return (
    <StaticSelector loading={loading} items={list} {...staticSelectorProps} />
  );
};

export default DynamicSelector;

编辑

作为 props 的默认值传递undefined更好，因为它在大多数情况下会被组件忽略，从而减少错误（如果有的话）。