react-native实现插槽功能

最新推荐文章于 2025-07-16 10:40:44 发布

cake_eat

最新推荐文章于 2025-07-16 10:40:44 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/cake_eat/article/details/117921220

React Native 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了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>
  }
}