在 TSX 组件中使用 JSX 组件无法在不抛出错误的情况下进行编译

Question

所以我有一个名为 ContractExpenses 的 typescript-react 组件，我在其中使用了一个名为 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 希望您传递 variables Prop ，要么传递它，要么将其设置为默认值，要么通过制作接口使其成为可选的。

像这样

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;

编辑

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

在 TSX 组件中使用 JSX 组件无法在不抛出错误的情况下进行编译

Using a JSX Component inside a TSX Component cannot compile without throwing an error

typescript

reactjs

react-typescript