Реагируйте на проблему детей [] с помощью TypeScript - PullRequest
Новая
       7

Реагируйте на проблему детей [] с помощью TypeScript

0 голосов
/ 15 февраля 2019

У меня есть один компонент Radio: 

import { RadioItemProps } from './Item';

type Props = {
  children: ReactElement<RadioItemProps>[];
};

export default function Radio(props: Props) {
  return props.children;
}

и компонент RadioItem, который должен быть прямым потомком Radio: 

export type RadioItemProps = {
  value: string;
  children: ReactText;
};

export default function RadioItem(props: RadioItemProps) {
  return <input type="radio" name="xxx" value={props.value} />;
}

Когда я их использую: 

<Radio>
  <RadioItem value="option-1">Option 1</RadioItem>
  <RadioItem value="option-1">Option 1</RadioItem>
</Radio>

У меня ошибка TypeScript: JSX element type 'ReactElement<RadioItemProps, ...>[]' is missing the following properties f rom type 'Element': type, props, key

Если я изменю тип потомков на ReactElement<RadioItemProps> и добавлю только одного потомка, это будет работать.Но как только я помещаю массив, я получаю эту ошибку.

Чего мне не хватает? 

"typescript": "^3.2.2",
"react": "16.7.0-alpha.2",
"react-dom": "16.7.0-alpha.2",
"@types/react": "^16.8.3",
"@types/react-dom": "^16.0.11",

1 Ответ

0 голосов
/ 15 февраля 2019

Я только что обнаружил проблему ... это из-за: 

export default function Radio(props: Props) {
  return props.children;
}

Мне пришлось изменить ее на: 

export default function Radio(props: Props) {
  return (
    <Fragment>{props.children}</Fragment>
  )
}

Кажется, что дочерние элементы (напечатанные как массив)не может быть возвращено напрямую.Что странно, потому что это работает: 

export default function Radio(props: Props) {
  return ['lol'];
}

Это было сложно ...

...