使用TSX组件内部的JSX组件，不抛出错误就无法编译

Question

因此，我有一个名为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;
有什么办法，我可以避免这样的错误，因为我必须将所有孩子（和他们的孩子！）转换为打字稿，所以使用打字稿真是使我丧命

因此，我有一个名为ContractExpenses的打字稿反应组件，并且在其中使用了一个名为DynamicSelector的JSX组件，但是出现如下错误：这是我的<...>

Answer 1

您可以将variables prop设为可选，例如，为其提供一些默认值。

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，要么传递它，要么将其设为默认值，或者通过创建接口使其成为可选。