12 组合与继承、CSS Module

最新推荐文章于 2023-11-17 11:11:55 发布

Stephy_Yy

最新推荐文章于 2023-11-17 11:11:55 发布

阅读量275

点赞数

分类专栏：系统学习 # react 文章标签： css react.js javascript

本文链接：https://blog.csdn.net/weixin_43503511/article/details/120584981

版权

本文探讨了React中的组合与继承概念，重点介绍了如何利用props处理不同类型的内部内容，并强调了React中children属性的作用。同时，文章讨论了React样式的处理，特别是CSS Module的使用，以及多层组件组合的实现。文中指出，由于React的props机制和组件组合的强大功能，继承在React中的需求并不常见。

摘要由CSDN通过智能技术生成

组合与继承

若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}></