javascript - 使用 TypeScript react Children[] 问题

Question

我有一个组件 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> ，并且只添加一个 child ，它可以工作。但是一旦我放置了数组，我就会收到此错误。

我缺少什么？

"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",

Answer 1

我刚刚发现这个问题...原因是:

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'];
}

这是一个棘手的问题......