咱们曾经学会了 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>);

在线代码

公众号【前端嘛】