导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

业务技能

针对性攻坚

AI

props.children

1. 如果 Container 标签有内容，React 会在 props 上增加 children 属性
2. 如果 Container 标签内部有非元素内容， children: 就是这个非元素内容
   1. <Container>123</Container>
3. 如果 Container 内部有单个元素内容， children: React元素对象
   1. <Container><h1>123</h1></Container>
4. 如果 Container 内部有多个元素内容， children：[React元素对象1, React元素对象2,"123",...]
   1. <Container><h1>123</h1><h2>234</h2></Container>

class Container extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="header">
          { this.props.header }
        </div>
        <div className="sidebar">
          { this.props.sidebar }
        </div>
        <div className="main">
          { this.props.main }
        </div>
      </div>
    )
  }
}

class Header extends React.Component {
  render() {
    return (
      <p>HEADER</p>
    )
  }
}

class Sidebar extends React.Component {
  render() {
    return (
      <p>SIDEBAR</p>
    )
  }
}

class Main extends React.Component {
  render() {
    return (
      <p>MAIN</p>
    )
  }
}

class App extends React.Component {
  render() {
    return (
      // <Container />
      <Container
        header={ <Header /> }
        sidebar={ <Sidebar /> }
        main={ <Main /> }
      />
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
)

props 可以传入 JSX

• 为什么 JSX 还可以通过 props 传递视图元素、React 元素？
  • 因为 JSX 本质上都会转成 React 元素（对象 Object）视图通过 props 传递的机制比较像 vue 的插槽
• React 没有 slot 的概念定义
• React 本身就允许通过 Props 传递任何类型的数据到子组件

class Container extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="header">
          { this.props.header }
        </div>
        <div className="sidebar">
          { this.props.sidebar }
        </div>
        <div className="main">
          { this.props.main }
        </div>
      </div>
    )
  }
}

class Header extends React.Component {
  render() {
    return (
      <p>HEADER</p>
    )
  }
}

class Sidebar extends React.Component {
  render() {
    return (
      <p>SIDEBAR</p>
    )
  }
}

class Main extends React.Component {
  render() {
    return (
      <p>MAIN</p>
    )
  }
}

class App extends React.Component {
  render() {
    return (
      <Container
        header={ <Header /> }
        sidebar={ <Sidebar /> }
        main={ <Main /> }
      />
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
)

CSS Module

• 前置知识：同一页面引入两个组件，两者皆有 .title 样式，那么后引入的组件的 .title 样式会覆盖前者组件的样式，即样式覆盖
  • 此时使用CSS模块化就能避免冲突
  • 在 react 脚手架中，内置支持 css module
• 把 CSS 当做模块传入组件内部，用 JS 的逻辑调用样式
• Vite 默认支持的特性, 但文件名有规范: xxx.module.css

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

h1,
p {
  margin: 0;
  font-weight: normal;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 60px;
  background-color: #000;
}

.sidebar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 300px;
  height: 100%;
  padding-top: 80px;
  box-sizing: border-box;
  background-color: orange;
}

.main {
  position: absolute;
  box-sizing: border-box;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 80px 0 0 320px;
  background-color: green;
}

import styles from './12.module.css' // 通过模块化方式导入样式
class Container extends React.Component {
  render() {
    return (
      <div className={ styles.container }>
        <div className={ styles.header }>
          { this.props.header }
        </div>
        <div className={ styles.sidebar }>
          { this.props.sidebar }
        </div>
        <div className={ styles.main }>
          { this.props.main }
        </div>
      </div>
    )
  }
}

class Header extends React.Component {
  render() {
    return (
      <p>HEADER</p>
    )
  }
}

class Sidebar extends React.Component {
  render() {
    return (
      <p>SIDEBAR</p>
    )
  }
}

class Main extends React.Component {
  render() {
    return (
      <p>MAIN</p>
    )
  }
}

class App extends React.Component {
  render() {
    return (
      <Container
        header={ <Header /> }
        sidebar={ <Sidebar /> }
        main={ <Main /> }
      />
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
)

多层组合

• React 目前还没有发现有需要组件继承的需求

• 因为通过 children 或者是传递视图 React 元素的方式完全可以解决组件组合

• props 可以传递任何类型的数据，所以组合的方式完全可以替代继承方案

• 逻辑部分需要继承或者共用

• 这个需要你自己去写通用抽离的模块、函数、类，单独进行模块导入使用

import styles from './13.module.css';
function Modal(props) {
  return (
    <div className={ styles.modal }>
      <header className={ styles.modalHeader }>
        <h1>{ props.headerTitle }</h1>
      </header>
      <div className={ styles.modalContent }>
        {/* 展示 modal 双标签之间的所有内容（类似 Vue 默认插槽） */}
        { props.children }
      </div>
    </div>
  )
}
function Alert(props) {
  return (
    <Modal headerTitle={ props.headerTitle }>
      <p>{ props.alertText }</p>
    </Modal>
  )
}
function LoginModal(props) {
  return (
    <Modal headerTitle="登录">
      <form action=''>
        <p>
          <input type="text" placeholder='用户名' />
        </p>
        <p>
          <input type="text" placeholder='密码' />
        </p>
        <p>
          <button>登录</button>
        </p>
      </form>
    </Modal>
  )
}
function WelcomeAlert() {
  return (
    <Alert
      headerTitle="欢迎您"
      alertText="亲爱的用户您好"
    />
  )
}
function App() {
  return (
    <div>
      {/* <WelcomeAlert /> */}
      <LoginModal />
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('app'));

html,
body {
  margin: 0;
  padding: 0;
}
h1,
p {
  margin: 0;
}
.modal {
  position: fixed;
  top: 60px;
  left: 50%;
  width: 300px;
  margin-left: -150px;
  box-shadow: 1px 3px 5px #999;
  border-radius: 10px;
  overflow: hidden;
}

.modalHeader {
  height: 44px;
  padding: 0 15px;
  box-sizing: border-box;
  line-height: 44px;
  background-color: orange;
}

.modalHeader h1 {
  font-size: 16px;
}

.modalContent {
  padding: 15px;
  box-sizing: border-box;
  background-color: #fff;
}