组合与继承

若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'))

React目前还没有发现有需要组件继承的需求
因为通过children或者传递视图React元素的方式完全可以解决组件组合的问题太；
props可以传递任何类型的数据，所以组合的方式可以替代继承方案。
逻辑部分需要继承或共用：该部分需要自己去编写逻辑抽离的模块、函数、类，单独进行模块导入使用

12 组合与继承、CSS Module相关推荐

class ts 扩展方法_如使用Typescript撸Vue（Vue2 + TS +TSX+CSS module）
Vue对TS的支持一致不太好,连Vue作者尤大也自嘲真香压错了宝.期待Vue3.0会用TS重构且会有较大改进.不过目前有一些第三方的库可以曲线优化对TS的支持.主要就介绍下过下面两个库来写Vue. 总 ...
深入浅出Java复用类【从字节码角度看toString调用机制、对象代理、组合与继承、转型、final、初始化】
这个世界上有10种人:一种是懂二进制的,一种是不懂二进制的你觉得类是在什么时候被加载的?[访问static域时,为什么?看完9就明白了] 文章目录 1.深入理解Java中toString方法的调用机 ...
java组合与继承始示例_Java 9功能与示例
java组合与继承始示例 Java 9 is a major release and it has brought us a lot of features for developers. In th ...
java可以多重继承吗_Java中的多重继承与组合vs继承
java可以多重继承吗有时我写了几篇有关Java继承,接口和组成的文章. 在这篇文章中,我们将研究多重继承,然后了解组成优于继承的好处. Java中的多重继承多重继承是创建具有多个超类的单个类的能 ...
重新精读《Java 编程思想》系列之组合与继承
Java 复用代码的两种方式组合与继承. 组合组合只需将对象引用置于新类中即可. 比如我们有一个B类,它具有一个say方法,我们在A类中使用B类的方法,就是组合. public class B {p ...
项目简单实用方式_组合替代继承_算法切换
算法切换关键字:算法切换意图: 关注算法的封装:将每一个算法封装到单独的类,使他们可以相互替换. 优点:对象(员工)与算法(岗位薪资计算方式)隔离. 缺点:客户端代码必须知道所有算法的实现,并自行 ...
java 中组合与复用_Java 代码复用(组合与继承)
java中的类都是围绕着类进行的.可以通过创建新类来复用代码,而不必从头编写.可以使用别人已经开发并调试好的类.此方法使用的窍门在于使用类而不破坏现有的程序代码.达到这一目的的方法有两种: 第一种方法 ...
多重继承java_Java中的多重继承与组合vs继承
多重继承java 有时我写了几篇有关Java 继承 , 接口和组成的文章. 在这篇文章中,我们将研究多重继承,然后了解组成优于继承的好处. Java中的多重继承多重继承是创建具有多个超类的单个类的能 ...
Java中的多重继承与组合vs继承
有时我写了几篇有关Java 继承 , 接口和组成的文章. 在这篇文章中,我们将研究多重继承,然后学习组成优于继承的好处. Java中的多重继承多重继承是创建具有多个超类的单个类的能力. 与其他一些流 ...

12 组合与继承、CSS Module

组合与继承

props

React样式

多层组合

12 组合与继承、CSS Module相关推荐

最新文章

热门文章