12 组合与继承、CSS Module

组合与继承

1. 若Container内部有内容，React会在props内部增加children属性
2. 若Container内部有非元素内容，children：非元素内容
3. 若Container内部有单个元素内容，children：React元素对象
4. 若Container内部有多个元素内容，children：[]

• 打印props
• 情况2：非元素内容

<Container>666</Container>

• 情况3：单个元素内容

<Container><h1>666</h1></Container>

• 情况4：多个元素内容

<Container>
    <h1>666</h1>
    <p>888</p>
</Container>

props

• JSX还可以通过props传递视图元素
• JSX本质上都会转成React元素（对象 Object）
• 视图通过props传递的机制类似Vue的插槽，但React没有slot的概念定义
• React本身就允许通过props传递任何类型的数据到子组件

React样式

• CSS Module
• index.module.css

import styles from './index4.module.css'
// 用变量接收
class Container extends React.Component {
   
    render() {
   
        console.log(this.props)
        return (
            <div className={
   styles.container}>
                <div className={
   styles.