如何在 ts 中使用 props.children

Question

我是 typescript 的新手，我尝试正确使用 props.children 和 typescript，但出现错误。

interface IFetcher {
  url: string;
}

const Fetcher: React.FC<IFetcher> = props => {
  const [data, setData] = useState<Array<{}>>();
  const [isLoading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<string>("");

  useEffect(() => {...})

  return props.children(data, error, isLoading);
};

这是 props.children 的错误：无法调用可能为“null”或“undefined”的 object。

我用这个技巧来解决它：

interface IFetcher {
  url: string;
}

const Fetcher: React.FC<IFetcher> = props => {
  const [data, setData] = useState<Array<{}>>();
  const [isLoading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<string>("");

  useEffect(() => {...})

  return props.children && props.children(data, error, isLoading);
};

但我还有另一个错误：

此表达式不可调用。 没有'string | 类型的成分号码 | 真实 | {} | ReactElement ReactElement 组件）> | 空） | （新（道具：任何）=> 组件）> | 反应节点数组 | ReactPortal' 是可调用的。

我需要帮助才能使用好方法。

编辑我找到了这个解决方案：

interface IFetcher {
  url: string;
  children(data: Array<{}>, error: string, isLoading: boolean): ReactElement;
}

const Fetcher: React.FC<IFetcher> = props => {
  const [data, setData] = useState<Array<{}>>([]);
  const [isLoading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<string>("");

  useEffect(() => {...});

  return props.children(data, error, isLoading);
};

当我定义孩子时，我现在没有错误，但这是正确的解决方案吗？

Answer 1

当您尝试将儿童道具称为 function 时，您必须确保儿童存在。 为了让您对孩子进行类型检查，您需要在界面中提供它

interface IFetcher {
  url: string;
  children(data: Array<{}>, error: string, isLoading: boolean): ReactElement;
}

const Fetcher: React.FC<IFetcher> = props => {
  const [data, setData] = useState<Array<{}>>([]);
  const [isLoading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<string>("");

  useEffect(() => {...});

  return props.children(data, error, isLoading);
};