在TypeScript（TSX）中需要一個React子組件

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

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

單身兒童

報價：

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