04-JSX数据渲染

JSX 数据渲染

一、相关知识点

• JSX中使用 { } 来展示数据，这个{ } 也可以设置简单的JS表达式
• 布尔类型的数据，React无法直接在 { }进行渲染，需要经过处理
• 数组，React默认将数组拼接为字符串，需要调用map()方法进行处理
• 对象Object 不能直接展示，可以转化为JSON 字符串，也可以直接调用。

二、渲染过程

1. 使用JSX声明React元素结构，这个结构就是React生成真实的DOM模板；
2. 这个JSX模板被babel编译成React.createElement();
3. 由React.createElement()将这些React元素渲染成虚拟DOM；
4. 有render() 函数，讲这些虚拟DOM渲染为真实DOM，将虚拟DOM节点插入body中

三、示例代码

1. 在头部引入react 和 babel

<script src="https://unpkg.com/react@18.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.1/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

2. HTML 代码

<div id="main"></div>

3. JS代码

3.1 首先在script标签中进行配置，

 <script type="text/babel"></script>

3.2 编写JSX代码

3.2.1 准备数据，多种类型的数据，尽可能的多考虑

let username = "小明";
let isMan = true;
let age = 30;
let arr = [10, 20, 30, 40];
let user = {
     uname: "小红",
     uage: 22,
   };

3.2.2 利用JSX展示数据

let div = (
        <div className="container">
          <p>姓名:{username}</p>
          <p>性别:{isMan},默认布尔类型数据,react无法直接展示</p>
          <p>性别:{isMan ? "男" : "女"}</p>
          <p>年龄:{age}</p>
          <p>数组:{arr},默认React将数组拼接为字符串了</p>
          <p>数组遍历:{arr.map((num) => num + "-")}</p>
          <div>
            数组遍历:
            {arr.map((num) => (
              <div>
                <span>{num}</span>
              </div>
            ))}
          </div>
          <div>
            数组遍历:
            {arr.map((num) => {
              return (
                <div className="d">
                  <a href="#">{num}</a>
                </div>
              );
            })}
          </div>
          <div>
            对象:{JSON.stringify(user)},注意对象不能直接展示,可以转成JSON字符串
          </div>
          <div>
            对象姓名:{user.uname},对象年龄：{user.uage}
          </div>
        </div>
      );

3.2.3 将数据渲染到页面中

let root = ReactDOM.createRoot(document.getElementById("main"));
root.render(div);

四、结果展示

let root = ReactDOM.createRoot(document.getElementById("main"));
root.render(div);

四、结果展示