如何将组件中的子级数量限制为react native中的一个？

Question

我有一个接受子对象的组件，我想做的是将子对象的数量限制为只有一个，我希望子对象是react native中的单个视图或单个文本

Answer 1

您可以使用React。儿童API，特别是React。儿童仅限。

我认为正确的语法是：

class MyComponent extends React.Component {
  render(){
    return React.Children.only(this.props.children)()
  }
}

这将验证只有一个子节点，并返回该子节点，如果有多个子节点，则抛出错误。

您还可以使用PropTypes

class MyComponent extends React.Component {
  render(){
    const children = this.props.children
    return (
      <>
        {children}
      </>
    )
  }
}

MyComponent.propTypes = {
  children: PropTypes.element.isRequired
}

如果您想进一步强制您的孩子只是一个Text或View实例，您可以编写一个自定义的PropTypes验证器，下面是StackOverflow上的一个示例