技術標籤：react知識reacthtmlreactjs

點標記的元件用法——類元件可以作為屬性的值-寫法參考類表示式

例項

第一步：在APP.js同層級的component下新建05.js

第二步：在App.js中進行匯入

import React from 'react';
import './App.css';
import BookManager from './component/05.js'

function App () {
  return (
    <div>
      <BookManager/>
    </div>
  )
}

export
 
 default App;

05.js檔案如下

/*
  點標記的元件用法

  類表示式
*/
import React from 'react'

// 類元件可以作為屬性的值
let Test = {
  Header: class extends React.Component {
    render () {
      return (
        <div>Header</div>
      )
    }
  },
  Content: class extends React.Component {
    render () {
      return
 
 (
        <div>Content</div>
      )
    }
  },
  Footer: class extends React.Component {
    render () {
      return (
        <div>Footer</div>
      )
    }
  }
}

function ShowContent () {
  return (
    <div>
      <Test.Header/>
      <Test.Content/>
      <
 
Test.Footer/>
    </div>
  )
}

export default ShowContent

npm run start啟動專案，頁面如下：