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

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

ReactDOM.render(
Hello React!
, document.getElementById("root"));

Hello React会被嵌入到

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

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

插值表达式

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

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

const name = 'Josh Perez';
const element = 
Hello, {name}
;

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

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

在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。例如，2 + 2，user.firstName 或 formatName(user) 都是有效的 JavaScript 表达式。

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

在线代码

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

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

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

经过观察可以发现：

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 = (
    

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

在线代码

列表渲染

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

let data = [1, 2, 3];
let el = (
    

        {data}
    
);
ReactDOM.render(el, document.getElementById("root"));
// 页面显示:123

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

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

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

示例如下：

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

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

在这个示例中，我们用forEach遍历数组，使用 JSX 创建 React 元素，将每个数组元素都用

标签包裹，得到了新的数组[

1

,

2

,

3

]

又在

{toList(data)}

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

元素中

我们已经知道了{}中的数组显示规则：去掉[]和,

于是最终得到：

let el = (
    

        
1
        
2
        
3
    
);

回过头来看函数toList：用已有数组生成新数组

我们可以用map方法和箭头函数来进一步简化这个方法：

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

在线代码

公众号【前端嘛】