美文网首页
React的map方法里添加条件渲染(包括三元判断)

React的map方法里添加条件渲染(包括三元判断)

作者: 小宝薯 | 来源:发表于2020-01-20 17:09 被阅读0次
前期装备

html中使用React

正常map代码:
let array1 = ['张三', '李四','王二'];
let oDiv = document.getElementById('app');

ReactDOM.render(
       <div>
           {
                array1.map((e, i, arr) => 
                <div key={i}>
                    <h4>name = { e }</h4>
                    <h4>id = { i }</h4>
                </div>
                )
            }
            </div>,
            oDiv
        );

如图



新需求:map里添加条件渲染

  • ️如果碰到name===‘李四’,就过滤掉不展示
 ReactDOM.render(
       <div>
       {
           array_name.map((e, i, arr) =>
               e === '李四' ?  <div key={i}</div>:
               <div key={i}>
                   <h4>element = { e }</h4>
                   <h4>index = { i }</h4>
               </div>
           )
       }
       </div>,
       oDiv
   );

如图


tian

相关文章

  • React的map方法里添加条件渲染(包括三元判断)

    前期装备 html中使用React 正常map代码: 如图 新需求:map里添加条件渲染 ️如果碰到name===...

  • #9 React中的条件渲染

    React 中的条件渲染有以下几种方式: if 语句 三元操作符(ternary operator) 逻辑 && ...

  • 条件渲染

    条件渲染在react中类似于javascript的条件判断。利用javascript中的类似于if这样的条件操作符...

  • 笔记

    组件里面方法函数内部可以写return标签,在里面render引用渲染模板 react的map函数与es5的map...

  • 渲染列表

    在 React 中我们习惯用 map() 方法来代替循环语句渲染多个对象,下例我们渲染一个学生列表: 注意 ,对...

  • 5. React 知识点记录

    1. 基础使用 (变量、表达式、class、子元素和组件) 2. JSX条件判断和渲染列表(if else 三元...

  • React 列表与表单

    列表 在React中,拿到一组数据后,一般会用map方法来遍历渲染。 表单 HTML 表单元素与 React 中的...

  • Vue组件化开发

    上期回顾 条件判断(v-if、v-show)的基本使用、开发时选择条件渲染案例(input添加key的区别)循环遍...

  • 使用map遍历渲染ui时,包含内部的view无法渲染出来

    标签:map react native android ios 1.问题描述:使用map遍历渲染ui时,包含内部的...

  • react条件渲染

    条件渲染的几种形式 &&短路运算符 总结:根据组件代码的复杂程度,可以依次选择。

网友评论

      本文标题:React的map方法里添加条件渲染(包括三元判断)

      本文链接:https://www.haomeiwen.com/subject/rlwjzctx.html