組件復合

• 復合組件給予你足夠的靈活去定義組件的外觀和行為,而且是以一種明確和安全的方式進行.
• 如果組件間有公用的非UI邏輯,將它們抽取為JS模塊導入使用而不是繼承它
• /src/components/Composition.js

// Dialog作為容器不關心內容和邏輯 function Dialog(props){return <div style={{ border: "4px solid blue" }}>{props.children}</div> }// WelcomeDialog通過復合提供內容 function WelcomDialog() {return (<Dialog><h1>歡迎光臨</h1><p>感謝使用react</p></Dialog>) }export default function (){return <WelcomDialog></WelcomDialog> }

栗子

import React from 'react' // Dialog作為容器不關心內容和邏輯 // 等同于vue中的slot function Dialog(props) {return <div style={{ border: `4px solid ${props.color || 'blue'}` }}>{props.children}<div className="footer">{props.footer}</div></div> }// WelcomeDialog通過復合提供內容 function WelcomeDialog(props) {return (<Dialog {...props}><h1>歡迎光臨</h1><p>感謝使用react</p></Dialog>) }export default function() {const footer = <button>相當于 -- 具名插槽</button>return <WelcomeDialog color="red" footer={footer}></WelcomeDialog> }

總結

以上是生活随笔為你收集整理的react --- 复合组件,传递属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。