08-组件化进阶（二）-点标记的组件用法——类组件可以作为属性的值-写法参考类表达式

点标记的组件用法——类组件可以作为属性的值-写法参考类表达式

实例

第一步：在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启动项目，页面如下：