react学习：组件复合Composition

最新推荐文章于 2024-03-12 08:02:16 发布

大神乔伊

最新推荐文章于 2024-03-12 08:02:16 发布

阅读量345

点赞数

分类专栏： react 文章标签： reactjs

本文链接：https://blog.youkuaiyun.com/weixin_44828005/article/details/117277601

版权

react 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了React中组件复合的概念，强调其在拓展和复用组件方面的作用。通过示例展示了如何使用props.children传递内容，并利用展开运算符在Dialog组件中接收和展示这些内容。此外，还提到了具名插槽的概念，即通过props传递特定的子组件。这种做法有助于提高代码的灵活性和可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题导向

组件复合Composition？

如果你都有了答案，可以忽略本文章，或去react学习地图寻找更多答案

组件复合

作用：组件拓展与复用，自定义组件的外观和行为

如何使用：使用组件包裹内容，传递props.children，chilren可以是任意的JS表达式

const App = (props) => {
    传递button给组件
    const footer = <button>具名插槽</button>
    
    传递color属性
    return <WelcomeDialog color='green' footer={footer} />
}

WelcomeDialog通过复合提供内容
function WelcomeDialog(props){
   return(
      重点：使用展开运算符，接收App传递的color属性和footer，传给dialog
      <Dialog {...props}> 
          <h1>hello</h1>
          <p>react</p>
      </Dialog>
   )
}

Dialog作为容器不关心内容和逻辑
function Dialog(props) {
   return (
       <div style={{border:`4px solid ${props.color || 'blue'}`}}>
           {props.children}   //children是WelcomeDialog的H1和p标签
	       <div>
	          {props.footer} //具名插槽，有名字的插槽，是button
	       </div>
       </div>
   )
}

学习更多

react学习地图