1.11 两种实现组件的点标记写法

一、实现组件的点标记写法

1. 最基本的组件使用

   function Welcome() {
     return (
       <>
         <div>Welcome</div>
       </>
     )
   }
   
   function App() {
     return (
       <>
         <div>Default Template</div>
         <br />
         <Welcome />
         <Welcome></Welcome>
       </>
     )
   }
   
   export default App
   

   也可以将welcome拆分成另一个文件，然后正常进入使用即可

2. 对象形式

   const Qf = {
     Welcome() {
       return (
         <>
           <div>Welcome</div>
         </>
       )
     },
   }
   
   // 解构
   const {Welcome} = Qf
   
   function App() {
     return (
       <>
         <div>Default Template</div>
         <br />
         <Qf.Welcome />
         <Welcome></Welcome>
       </>
     )
   }
   
   export default App
   

   定义一个QF，在里面写相关组件，可以写多个，然后使用就可以进行.对象实现

   也可以解构实现

3. 函数形式

   // const Qf = () => {
   function Qf() {
     return (
       <>
         <div>Hello</div>
       </>
     )
   }
   
   Qf.Welcome = () => {
     return (
       <>
         <div>Welcome2</div>
       </>
     )
   }
   
   const { Welcome } = Qf
   
   function App() {
     return (
       <>
         <div>Default Template</div>
         <br />
         <Qf />
         <Qf.Welcome></Qf.Welcome>
         <Welcome />
       </>
     )
   }
   
   export default App
   

   也可以实现结构操作

4. 组件点标记用途：用于进行组级别划分，方便知晓所属组别与便捷调用