React（2）React的嵌套和组件实例

不念不忘少年蓝@ 2022-05-31 06:37 289阅读 0赞

### 3、嵌套 ###

被嵌套的目标可以是函数或者类，需要以大写字母开头：

函数是 `return` 的返回值，类是 `render` 函数的返回值；

示例：

// 被嵌套
    function Foo() { 
        return <h3>这是一个h3标签</h3>
    }
    
    // 嵌套到目标
    ReactDOM.render(
        <div>
            <Foo/>
            <p>当前时间是：{formatDate(new Date())}</p>
        </div>,
        document.getElementById('root')
    )

核心是函数名/类名是 Foo，所以嵌套的地方的标签名也为 `Foo`，并且是一个闭合标签。

类的写法：

class Foo extends React.Component { 
        // 如果只是单纯的显示DOM，这里的构造函数可以省略
        constructor(props) {
            super(props)
        }
    
        render() {
            return <h3>这是一个h3标签</h3>
        }
    }

### 4、组件 ###

组件实例必须继承于 `React.Component`。

组件是一个完整的系统，而 React 的 DOM 元素，只是 html 片断。

// 继承于 React.Component
    // 类名必须大写字母开头
    class HelloWord extends React.Component { 
        constructor(props) {
            // 调用 this 前必须先执行 super(props) ，理由是es6规则
            super(props);
            // 通过 state 设置组件变量
            this.state = {
                world: 'world'
            }
            // 调用方法时，方法的 this 指向组件实例（也就是没啥特别的地方）
            this.log()
        }
    
        // 渲染函数，this 指向实例本身
        render() {
            console.log(this)
            return <div className={domClass}>
                Hello，{
       this.state.world}!
            </div>
        }
    
        log() {
            console.log(this)
        }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，289人围观）

还没有评论，来说两句吧...

相关阅读

相关 react页面引导组件react-guide

* 源码地址： [https://github.com/liuyangjike/react-guide][https_github.com_liuyangjike_r...

以你之姓@/ 2024年04月18日 17:18/ 0 赞/ 68 阅读

相关 React的组件学习

React的组件学习参考资料：https://zh-hans.react.dev/learn/your-first-component 一、定义组件 e

╰半夏微凉°/ 2024年02月20日 11:11/ 0 赞/ 24 阅读

相关 React获取DOM和获取组件实例的方式

文章目录 React获取DOM的方式 ref获取DOM元素 ref获取组件实例 React获取DOM的方式

偏执的太偏执、/ 2023年10月02日 20:53/ 0 赞/ 18 阅读

相关 React-2----react基础

1 认识由facebook开发，只提供了MVC中的V。优势： ①是组件化的，将js与html标签结合到一起 ②单向数据流 ③虚拟DOM树下面为一段代码，初

我会带着你远行/ 2023年06月19日 11:25/ 0 赞/ 26 阅读

相关 react和react2_React性现代化

react和react2 Reactive programming has taken JavaScript by storm over the last decade, a

以你之姓@/ 2023年02月21日 14:29/ 0 赞/ 12 阅读

相关 REACT_react配置组件路径引用@

暴露配置文件 create-react-app 生成的项目看不到 webpack 相关的配置文件，需要先暴露出来，使用如下命令 npm run eject

「爱情、让人受尽委屈。」/ 2023年01月23日 05:51/ 0 赞/ 53 阅读

相关 React实例1-新建组件

1.新建组件在src目录下新建一个文件SmailSmailGirl.js文件，然后建立一个基本的HTML结构。 import React,{ Componen

痛定思痛。/ 2022年12月12日 15:30/ 0 赞/ 136 阅读

相关 React（2）React的嵌套和组件实例

3、嵌套被嵌套的目标可以是函数或者类，需要以大写字母开头：函数是 `return` 的返回值，类是 `render` 函数的返回值；示例： // 被嵌

不念不忘少年蓝@/ 2022年05月31日 06:37/ 0 赞/ 290 阅读

相关 React-router（2）路由嵌套

2、路由嵌套： > 参考 2.routingNested.js > > [DEMO地址][DEMO] 还是以[上一节][Link 1]上面那个 DEMO 为示例。

骑猪看日落/ 2022年05月30日 04:08/ 0 赞/ 240 阅读

相关组件化和React

组件化和React 1. 对组件化的理解？ 2. JSX 的本质是什么？ 3. JSX 和 vdom 4. setState 的过程？ 5. React 和 V

客官°小女子只卖身不卖艺/ 2022年05月18日 22:58/ 0 赞/ 347 阅读