3

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

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，或者我必须添加一个特定的道具？

4

2 回答 2

0

这对我有用：

export const Example = (props: { children: ReactElement }) => {
  return <div>{props.children}</div>
}
于 2019-09-26T07:43:09.770 回答
-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>
    );
  }
});
于 2016-06-29T12:46:07.657 回答