react-native - 如何在本机反应中创建子组件？

Question

我看到反应原生元素 - 卡片组件像这样工作。

<Card>
  <Card.Title>blahblah</Card.Title>
  <Card.Divider />
</Card>

我想创建一个带有标题和分隔符等子组件的组件。

我可以创建这样的组件。

class A extends Component {
}

如何将子组件（比如说标题）添加到 A 组件？

Answer 1

子组件是类似于组件本身的对象，但是它们作为其键传递给主组件。这两个点赞可以提供很好的帮助：

https://dev.to/ms_yogii/create-react-subcomponents-in-a-simple-way-5h1f

https://dev.to/shayanypn/buckle-with-react-sub-component-10ll

Answer 2

根据Reza的回答，我做了一个类组件。这是正确的方法吗？如有错误请指正。。

class Left extends Component {
  static id = 'Left';
  render() {
    return (
      <View>
        {this.props.children}
      </View>
    );
  }
};
class Right extends Component {
  static id = 'Right';
  render() {
    return (
      <View>
        {this.props.children}
      </View>
    );
  }
};
class SideBySide extends Component {
  protected others = [];
  constructor(props) {
    super(props);
    for(let i of this.props.children) {
      if(i.type.id == 'Left') this.left = i;
      else if(i.type.id == 'Right') this.right = i;
      else this.others.push(i)
    }
  }
  render() {
    return (
      <View style={{flexDirection: 'row', }}>
        {this.left}
        {this.right}
        {this.props.others}
      </View>
    );
  }
};
SideBySide.Left = Left;
SideBySide.Right = Right;