如何做反應，ES6地圖功能

Question

我試圖使消息的數組，但希望它通過課堂上給出的條件我的代碼看起來像這樣使不同的內部condtitional渲染：

render() { 
     return (
     <div> 
     {this.props.messages.map((m, index) => (
      //if m.id === 1 render this: 
      <p className={someClass1}>Hello, {m.message}!</p> 
      //else render this: 
      <p className={someClass2}>Hi, {m.message}!</p> 
    ))} 
     </div>); 
    } 

Answer 1

您可以輕鬆地將邏輯添加到您的地圖。您只需要將內容不作爲反應組件的內聯返回。

render() { 
    return (
     <div> 
      {this.props.messages.map((m, index) => { 
       if (m.id === 1){ 
        return <p className={someClass1}>Hello, {m.message}!</p> 
       } 
       return <p className={someClass2}>Hi, {m.message}!</p> 
      })} 
     </div> 
    ); 
    } 

你也可以做同樣的事情用一個foreach對你的回報以外的渲染，像這樣

render() { 
    const elems = []; 
    this.props.messages.forEach((m, index) => { 
     if (m.id === 1) { 
      elems.push(<p className={someClass1}>Hello, {m.message}!</p>); 
     } else { 
      elems.push(<p className={someClass2}>Hi, {m.message}!</p>); 
     } 
    return (
     <div> 
      {elems} 
     </div> 
    ); 
    }