07、08 条件渲染、列表渲染

最新推荐文章于 2022-06-14 10:47:50 发布

Stephy_Yy

最新推荐文章于 2022-06-14 10:47:50 发布

阅读量91

点赞数

分类专栏：系统学习 # react 文章标签： react.js

本文链接：https://blog.csdn.net/weixin_43503511/article/details/120500698

版权

这篇博客主要介绍了React中如何实现条件渲染和列表渲染。条件渲染利用JSX表达式，避免使用v-if等指令。在HTML中使用JSX时，需要注意table元素的完整性和警告。列表渲染通过map函数实现，并强调了每个列表项应有独特的key属性，提醒开发者避免使用index作为key，推荐使用数据的唯一id。此外，还讨论了key值的正确赋值方式，强调key不应作为子组件的属性传递。

摘要由CSDN通过智能技术生成

条件渲染

React没有像v-if、v-show这样的指令，需要使用JSX表达式组合而成
// 与运算三目
// 判断表达式一定是false/null/undefined时才不会被渲染，0、空字符串、NaN会显示
// 如果render函数返回null，不会进行任何渲染

......
      state = {
        showLeft: false
        // showLeft: undefined, // 与运算中效果同false
        // showLeft: null, // 与运算中效果同false
        // showLeft: 0 // 在与运算中会显示
        // showLeft: Number(undefined) // 在与运算中会显示
      }
......
      {
             !this.state.showLeft && <Right />
       }

在这里插入图片描述

HTML中使用JSX

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel"> </script>

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

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

<body>
  <div id="app"></div>
  <script type="text/babel">
    class Left extends React.Component {
      render() {
        return (
          <div>Left</div>
        )
      }
    }
    class Right extends React.Component {
      render() {
        return (
          <div>Right</div>
        )
      }
    }
    class Main extends React.Component {
      state = {
        showLeft: false
        // showLeft: undefined, // 与运算中效果同false
        // showLeft: null, // 与运算中效果同false
        // showLeft: 0 // 在与运算中会显示
        // showLeft: Number(undefined) // 在与运算中会显示
      }
      handleClick() {
        this.setState({
          showLeft: !this.state.showLeft
        })
      }
      render() {
        return (
          <div>
            <h1>Main</h1>
            <button onClick={this.handleClick.bind(this)}>{this.state.showLeft ? 'turn Right' : 'turn Left'}</button>
            {
              // 1. 三目运算
              // this.state.showLeft ? <Left /> : <Right />
            }
            {
              // 2. 与运算
              this.state.showLeft && <Left />
            }
            {
              !this.state.showLeft && <Right />
            }
          </div>
        )
      }
    }
    ReactDOM.render(
      <Main />,
      document.getElementById('app')
    )
  </script>

</body>

</html>

列表渲染 JSX → map

table相关warning

JSX中使用table，若未加tbody、thead会告警

key相关warning

Each child in a list should have a unique “key” prop.（列表中的每个子元素都必需有一个唯一的key属性值）
key是React确定元素是否改变的唯一标识，key必需在兄弟节点中是唯一的

不建议使用index作为key值的情况

建立在列表顺序改变、元素增删的情况下：列表增删或顺序变了，index对应项就会改变
若列表是静态不可操作的，可以选择index作为key值

用数据唯一的id作为key

动态生成一个静态id nanoid yarn add nanoid 每次render都会生成不同的id

import {
    nanoid } from 'nanoid'
class MyTable

最低0.47元/天解锁文章

Stephy_Yy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
07、08 条件渲染、列表渲染

条件渲染React没有像v-if、v-show这样的指令，需要使用JSX表达式组合而成// 与运算三目// 判断表达式一定是false/null/undefined时才不会被渲染，0、空字符串、NaN不显示// 如果render函数返回null，不会进行任何渲染列表渲染 JSX → maptable相关warningJSX中使用table，若未加tbody、thead会告警key相关warningEach child in a list should have a uniqu
复制链接

扫一扫

专栏目录