12 组合与继承、CSS Module

组合与继承

若Container内部有内容，React会在props内部增加children属性
若Container内部有非元素内容，children：非元素内容
若Container内部有单个元素内容，children：React元素对象
若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.header}>{this.props.header}</div><div className={styles.main}><div className={styles.left}>{this.props.left}</div><div className={styles.right}>{this.props.right}</div></div></div>)}
}
class Header extends React.Component {render() {return <div>Header</div>}
}
class Left extends React.Component {render() {return <div>Left</div>}
}
class Right extends React.Component {render() {return <div>Right</div>}
}
class App extends React.Component {render() {return (<div><Containerheader={<Header />}left={<Left />}right={<Right />}></Container></div>)}
}
ReactDOM.render(<App />,document.getElementById('app')
)

.container {background: #ccc;text-align: center;
}
.header {height: 50px;line-height: 50px;border: 2px dashed #000;
}
.main {display: flex;
}
.left {width: 20%;background: pink;
}
.right {background: skyblue;flex: 1;
}

多层组合

import styles from './index5.module.css'// 多层组合
// Modal是公共的部分，定制的内容作为children传入
function Modal(props) {return (<div className={styles.wrap}><header className={styles.title}>{props.title}</header><div className="main">{props.children}</div></div>)
}
// 注意函数式 props作为参数传入 不用this来访问props
function Alert(props) {return (<div><Modal title={props.title}><p>{props.mainText}</p></Modal></div>)
}
function LoginModal(props) {return (<div><Modal title={props.title}><form><p>用户名：<input type="text" /></p><p>密码：<input type="password" /></p><p><button>登录</button></p></form></Modal></div>)
}
ReactDOM.render(<div><AlertmainText="显示内容"title="显示modal"/><LoginModal title="登录modal"></LoginModal></div>,document.getElementById('app'))