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问题

1 个答案: