Question

如果我有一个覆盖并指定单个孩子的界面，可以是：

interface Props extends React.HTMLProps<HTMLDivElement> {
    children?: React.ReactElement<any>;
}

class MyComponent extends React.Component<Props, {}> {
    // ...
}

IntelliSense正确显示单元素子道具类型，但我可以使用带有多个子组件的这些道具的组件，而不会出现任何错误：

<MyComponent>
  <div>hello</div>
  <div>world</div>
</MyComponent>

使用TypeScript 1.8.30.0可以很好地编译，但在运行时它会中断：

Invariant Violation: ReactDOM.render(): Invalid component element.

它只与一个<div/>子元素一起使用，因为组件代码是为该场景编写的。这对我来说似乎是一个错误 - 我希望它能够意识到两个<div/>元素与children的定义不匹配。我想我会先问这里，然后再打开一个问题，万一我错过了什么。

是否可以通过this.props.children仅要求一个孩子，或者我是否必须添加特定道具？

Answer 1

这对我有用：

export const Example = (props: { children: ReactElement }) => {
  return <div>{props.children}</div>
}

Answer 2

您可以在下面找到相关信息。

Single Child

引用：

使用React.PropTypes.element，您可以指定只有一个子项可以作为子项传递给组件。

可以只强制执行一个孩子。

var MyComponent = React.createClass({
  propTypes: {
    children: React.PropTypes.element.isRequired
  },

  render: function() {
    return (
      <div>
        {this.props.children} // This must be exactly one element or it will warn.
      </div>
    );
  }
});

在TypeScript（TSX）中需要单个React子组件

2 个答案: