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

如果我有一个覆盖并指定单个子级的接口，比如：

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

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

它只使用一个子元素，因为组件代码是为该场景编写的。这对我来说似乎是一个bug——我希望它意识到两个

元素与

子元素的定义不匹配。不过，我想我会先在这里问一下，然后再开始讨论，以防我遗漏了什么

是否可以通过
this.props.children
只需要一个孩子，或者我必须添加一个特定的道具？
您可以在下面找到相关信息


引述：

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

var MyComponent=React.createClass({
道具类型：{
子项：React.PropTypes.element.isRequired
},
render:function（）{
返回(
{this.props.children}//这必须正好是一个元素，否则将发出警告。
);
}
});
这对我很有用：

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

export const Example=（props:{children:ReactElement}）=>{
返回{props.children}
}
这可能适用于JSX，但我正在尝试从TSX获取TypeScript编译器错误。指定propTypes是否也向TS指示不应允许多个子项？我以前从未见过道具在TSX中改变任何东西…不幸的是，TSX没有那么聪明。。然而想象一下，在一个场景中，您将调用一个函数，该函数将返回一些内容，这些内容最终将作为
MyComponent
中的子项。TSX无法判断。。。然而……）可能值得一试，但这将是一个漫长的过程。对，但TS知道函数的返回类型和子属性的类型，所以它应该能够比较它们，并看到它们不匹配。
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>
    );
  }
});

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