react-native实现插槽功能

最新推荐文章于 2026-06-27 07:16:39 发布

原创最新推荐文章于 2026-06-27 07:16:39 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

React Native

当前文章被收录于：

React Native

2 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了React中this.props.children属性的使用，它允许我们传递子组件到父组件并渲染。通过这个属性，我们可以实现类似插槽的功能，展示子组件的内容。示例中，`Sub`组件接收颜色和children作为props，然后在内部渲染带颜色的文本及children内容。

this.props.children 属性表示组件的所有子节点。利用this.props.children可以实现插槽功能。

class Index extends React.Component{
  render(){
    return <View>
      <Sub color="red">
        <View><Text>++++++++</Text></View>
      </Sub>
    </View>
  }
}

class Sub extends React.Component{
  render(){
    return <View>
      <Text style={{color:this.props.color}}>子组件</Text>
      {this.props.children}
    </View>
  }
}