React.js 小书阅读笔记3

最新推荐文章于 2025-05-10 00:34:08 发布

转载最新推荐文章于 2025-05-10 00:34:08 发布 · 254 阅读

❌已废弃专栏收录该内容

37 篇文章

订阅专栏

本文通过简单例子讲解 React.js 描述页面 UI 的方式，引入相关组件，介绍了 JSX 语法，它扩展了 JavaScript 语法，能在代码里编写类似 HTML 标签结构，会构建对象描述 HTML 结构信息，还给出练习题及两种代码写法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

仅供个人学习！
本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/blog/lesson4

使用 JSX 描述 UI 信息

通过一个简单的例子讲解 React.js 描述页面 UI 的方式：

我们在文件头部从 react 的包当中引入了 React 和 React.js 的组件父类 Component。记住，只要你要写 React.js 组件，那么就必须要引入这两个东西。

ReactDOM 可以帮助我们把 React 组件渲染到页面上去。

import ReactDOM from 'react-dom'

可以发现ReactDOM是从 react-dom 中引入的，而不是从 react 引入。为什么不把这些东西都包含在 react 包当中呢？

return 的东西就比较奇怪了，它并不是一个字符串，看起来像是纯 HTML 代码写在 JavaScript 代码里面。这种看起来“在 JavaScript 写的标签的”语法叫 JSX。

HTML 所有的信息我们都可以用合法的 JavaScript 对象来表示：于是 React.js 就把 JavaScript 的语法扩展了一下，让 JavaScript 语言能够支持这种直接在 JavaScript 代码里面编写类似 HTML 标签结构的语法

React.createElement 会构建一个 JavaScript 对象来描述你 HTML 结构的信息，包括标签名、属性、还有子元素等。

练习题： http://scriptoj.mangojuice.top/problems/1

答案：

有两种写法

较为简单的，直接在ReactDOM.render()方法中写我们的标签

function renderContent (content) {
    ReactDOM.render(
        <h1>{ content }</h1>,
        document.getElementById('root')
    )
}

2.写一个类继承Component

function renderContent(content) {
    
    class Content extends Component(
        render() {
            return (
                <h1>{ content }</h1>
            )
        }
    )

    ReactDOM.render(
        <Content />,   //content类
        document.getElementById('root')
    )
}

当然所有的代码中别忘了在 HTML 中写上你要插入的 "容器"
即<div id='root'></div>

【补充：

赋予节点样式；

x.setAttribute("class",类名)

getAttribute(); 设置指定元素的属性值。如果该属性已存在，则更新该值; 否则添加具有指定名称和值的新属性。

x.innerHTML = 内容 //赋值

添加节点到父元素

要添加到的元素.appendChild(x);