包含组合

import React from "react";
import ReactDOM from "react-dom";
class Container extends React.Component {
  render() {
    console.log(this.props);
    return <div className="container">{this.props.children}</div>;
  }
}
class App extends React.Component {
  render() {
    // return <Container></Container>;
    // return <Container>123</Container>;
    // return <Container><p></p></Container>;
    return <Container>123<p></p><div></div></Container>;
  }
}
ReactDOM.render(<App />, document.getElementById("app"));

children

如果 Container 内部有内容，React 会在 props 内部增加 children 属性
如果 Container 内部有非元素内容，children 对应是非元素内容
如果 Container 内部有单个元素内容，children 对应是 React 元素内容
如果 Container 内部有多个内容，children 对应 […( 非元素或 React 元素对象)] 内容
props 可以传递任何东西
包括 JSX ```jsx import React from “react”; import ReactDOM from “react-dom”;

class Container extends React.Component { render() { return (

{this.props.header}

{this.props.sidebar}

{this.props.main}

); } }

class Header extends React.Component { render() { return

HEADER

; } }

class SideBar extends React.Component { render() { return

SIDEBAR

; } }

class Main extends React.Component { render() { return

MAIN

; } }

class App extends React.Component { render() { return ( } sidebar={} main={

} /> ); } } ReactDOM.render(, document.getElementById(“app”));

<a name="GCYiP"></a>
### 为什么 JSX 还可以通过 props 传递视图元素 或 React 元素？
JSX 本质上都会转成 React 元素（对象 Object）<br />视图通过 props 传递的机比较像 vue 的插槽，React 没有 slot 的概念定义。<br />React 本身 请允许通过 Props 传递任何类型的数据到子组件
<a name="y7NCW"></a>
# CSS Module
CSS 模块化<br />用 JS 的逻辑来调用 CSS样式
> vite 要后缀 .module.css
index.module.css
```css
html,
body {
  margin: 0;
  height: 100%;
}
h1,
p {
  margin: 0;
  font-weight: normal;
}
.container{
  postion: relative;
  hegith: 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;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 80px 0 0 320px;
  background-color: green;
}

import style from 'index.moudle.css';
class Container extends React.Component {
  render() {
    return (
      <div className={style.container} >
        <div className={style.header}>{this.props.header}</div>
        <div className={style.sidebar}>{this.props.sidebar}</div>
        <div className={style.main}>{this.props.main}</div>
      </div>
    );
  }
}

多层组合

做一个模态框，体现多层组合
把最公共的提出来，再通过包含组合的方式，想插入什么就插入什么。

import React from "react";
import ReactDOM from "react-dom";
import styles from "./css/style.module.css";
function Modal(props) {
  return (
    <div className={styles.modal}>
      <header className={styles.modalHeader}>
        <h1>{props.headerTitle}</h1>
      </header>
      <div className={styles.modalContent}>{props.children}</div>
    </div>
  );
}
function Alert(props) {
  return (
    <Modal headerTitle={props.headerTitle}>
      <p>{props.alertText}</p>
    </Modal>
  );
}
function WelcomeAlert() {
  return (
    <Alert
      headerTitle="欢迎您，亲爱的用户"
      alertText="您是我们最尊贵的用户， 您将会体验到不一样的服务!"
    />
  );
}
class App extends React.Component {
  render() {
    return <WelcomeAlert />;
  }
}
ReactDOM.render(<App />, document.getElementById("app"));

html,
body {
  margin: 0;
  height: 100%;
}
h1,
p {
  margin: 0;
  font-weight: normal;
}
.modal {
  position: fixed;
  top: 60px;
  left: 50%;
  margin-left: -150px;
  width: 300px;
  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;
}

继承问题

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

因为通过 children 或者传递视图 React 元素的方式完全解决组件组合的问题
- props 传递任何类型的数据，所以组合的方式完全可以替代继承方案
逻辑部分需要继承或者共用
- 这个需要自己写逻辑抽离的模块、函数、类、单独进行模块导入使用

React 教程

组合与继承、CSS Module

包含组合

children

props 可以传递任何东西

多层组合

继承问题