美文网首页
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方法里添加条件渲染(包括三元判断)

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