React 学习（二）之 React.createElement

code_v
134 阅读1分钟

通过DOM向页面中添加一个div

  • 代码
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>

<body>

    <div id="root"></div>

    <script>
        // 通过DOM向页面中添加一个div
        // 创建一个div
        const div = document.createElement('div'); // 创建一个dom元素
        // 向div中设置内容
        div.innerText = '我是一个div';
        // 获取root
        const root = document.getElementById('root');
        // 将div添加到页面中
        root.appendChild(div);
    </script>
</body>

</html>
  • 结果
<div id="root">
    <div>我是一个div</div>
</div>

React向页面中添加元素

方法简介

React.createElement(type, props, ...children)

  • 用来创建一个React元素
  • 参数：
    1. 元素名（组件名）
    2. 元素中的属性
    3. 元素的子元素（内容）

原文档链接

ReactDOM.createRoot(domNode)

  • 用来创建React根元素，需要一个DOM元素作为参数

原文档链接

1、通过React向页面中添加一个div

  • 代码
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <!--引入react的核心库-->
    <script src="script/react.development.js"></script>
    <!--引入react的DOM库-->
    <script src="script/react-dom.development.js"></script>
</head>

<body>

    <div id="root"></div>

    <script>
        // 创建一个React元素
        const div = React.createElement('div', { className: "box" }, '我是React创建的div'); 
        // 获取根元素对应的React元素
        const root = ReactDOM.createRoot(document.getElementById('root'));
        // 将div渲染到根元素中
        root.render(div);
    </script>
</body>

</html>
  • 结果
<div id="root">
    <div class="box">我是React创建的div</div>
</div>

2、通过React向页面中添加多个元素

  • 代码
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <!--引入react的核心库-->
    <script src="script/react.development.js"></script>
    <!--引入react的DOM库-->
    <script src="script/react-dom.development.js"></script>
</head>

<body>
    <div id="root"></div>

    <script>
        const element = React.createElement('div', { className: 'container' },
            React.createElement('h1', { className: 'title' }, '复杂DOM示例'),
            React.createElement('p', { className: 'description' }, '这是一个使用React.createElement创建的复杂DOM结构'),
            React.createElement('ul', { className: 'list' },
                React.createElement('li', null, 'Item 1'),
                React.createElement('li', null, 'Item 2'),
                React.createElement('li', null, 'Item 3')
            )
        );
        // 获取根元素对应的React元素
        const root = ReactDOM.createRoot(document.getElementById('root'));

        // 将element渲染到根元素中
        root.render(element);
    </script>
</body>

</html>
  • 结果
<div id="root">
    <div class="container">
        <h1 class="title">复杂DOM示例</h1>
        <p class="description">这是一个使用React.createElement创建的复杂DOM结构</p>
        <ul class="list">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
</div>
avatar
文章
阅读
粉丝