用 TypeScript 反应 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>，并且只添加一个孩子，它就可以工作。但是一旦我把数组，我得到了这个错误。

我错过了什么？

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

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