前期裝備

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