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

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

使用 TypeScript 反应 children[] 问题

React children[] issue with TypeScript

javascript

arrays

children

typescript

reactjs