code学习

react 也就这么回事 02 —— JSX 插值表达式、条件渲染以及列表渲染

我们已经学会了 React 创建元素和渲染元素

ReactDOM.render(<div>Hello React!</div>, document.getElementById("root"));
           

Hello React

会被嵌入到

<div>

标签中,并且显示在页面上。

那么 React 如何将变量、算术运算、函数调用等表达式的结果显示在页面上呢?

插值表达式

React 提供了在 JSX 中嵌入表达式的方式,我们可以将表达式包裹在大括号中,并将它嵌入 JSX 中

在下面的例子中,我们声明了一个名为 name 的变量,然后在 JSX 中使用它

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);
           

{name}

这种用大括号包裹一个表达式的写法被称为“插值表达式”

在 JSX 语法中,你可以在大括号内放置任何有效的 JavaScript 表达式。例如,

2 + 2

user.firstName

formatName(user)

都是有效的 JavaScript 表达式。

你甚至可以在大括号中放置 JSX,因为 JSX 本身就是一个表达式。编译之后,JSX 表达式会被转换成普通的 JavaScript函数调用

在线代码

不同数据类型在插值表达式中的表现

虽然可以在大括号中放置任何有效的 JavaScript 表达式,但是并不是所有数据类型都能显示在页面上

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Static Template</title>
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
  <div id="root"></div>
</body>
<script type="text/babel">
  let data1 = "Hello React!";
  let data2 = 1;
  let data3 = true;
  let data4 = undefined;
  let data5 = null;
  let data6 = [1, 2, 3];
  // let data7 = { name: "react" };
  let data7 = "object";
  let el = (
    <div>
      <div>{data1}</div>
      <div>{data2}</div>
      <div>{data3}</div>
      <div>{data4}</div>
      <div>{data5}</div>
      <div>{data6}</div>
      <div>{data7}</div>
    </div>
  );
  ReactDOM.render(el, document.getElementById("root"));
</script>

</html>
           

我们将不同数据类型的数据用大括号包裹,尝试将它们显示在页面上

经过观察可以发现:

  1. undefined

    null

    不会在页面上显示
  2. 数组

    [1, 2, 3]

    显示在页面上会变成:

    123

  3. 对象则会报错

那么如何正确显示数组以及对象呢?此处暂且不表

条件渲染

在 React 中,你可以依据应用的不同状态,只渲染对应状态下的部分内容,即条件渲染

条件渲染的其中一个方式就是:在插值表达式中使用

与运算符&&

或者

三目运算符condition ? true : false

let data = "Hello React!";
// let state = true;
let state = false;

let el = (
    <div>
        <div>{state && "state为true时显示"}</div>
        <div>{state ? "state为true时显示" : "state为false时显示"}</div>
    </div>
);
ReactDOM.render(el, document.getElementById("root"));
           

在线代码

列表渲染

在大括号中直接插入数组,并不能将数组元素逐一显示

let data = [1, 2, 3];
let el = (
    <div>
        {data}
    </div>
);
ReactDOM.render(el, document.getElementById("root"));
// 页面显示:123
           

如果我们想让数组的每个元素逐一通过

<li>

显示,可以借助函数逐一创建

<li>

,然后将函数插入插值表达式中

示例如下:

let data = [1, 2, 3];
const toList = (list) => {
    let ret = [];
    list.forEach((element) => {
        ret.push(<li>{element}</li>);
    });
    return ret;
};

let el = <ul>{toList(data)}</ul>;
ReactDOM.render(el, document.getElementById("root"));
           

在这个示例中,我们用

forEach

遍历数组,使用 JSX 创建 React 元素,将每个数组元素都用

<li>

标签包裹,得到了新的数组

[<li>1</li>, <li>2</li>, <li>3</li>]

又在

<ul>{toList(data)}</ul>

中通过插值表达式来将新数组嵌入到

<ul>

元素中

我们已经知道了

{}

中的数组显示规则:去掉

[]

,

于是最终得到:

let el = (
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
);
           

回过头来看函数

toList

:用已有数组生成新数组

我们可以用

map

方法和箭头函数来进一步简化这个方法:

const toList = (list) => list.map((element) => <li>{element}</li>);
           

在线代码

公众号【前端嘛】

继续阅读