как использовать props.children с тс - PullRequest
Новая
       1

как использовать props.children с тс

0 голосов
/ 26 сентября 2019

Я новичок в машинописи и пытаюсь правильно использовать props.children с машинописью, но получаю ошибку.

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: Невозможно вызвать объект, который может быть 'нулевым' или 'неопределенным'.

Я использую этот трюк для разрешения: 

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);
};

, но у меня есть другая ошибка:

это выражение не вызывается.Нет составляющих типа 'строка |номер |правда |{} |ReactElement ReactElement Component)> |ноль) |(новый (реквизиты: любой) => Компонент)> |ReactNodeArray |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);
};

Когда я определяю детей, у меня нет ошибки, но действительно ли это правильное решение?

1 Ответ

2 голосов
/ 26 сентября 2019

Когда вы пытаетесь называть детей реквизитом как функцией, вы должны быть уверены, что дети существуют.Чтобы навязать проверку типов детям, вам необходимо предоставить ее в интерфейсе 

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);
};
...