2017-04-03 63 views
0

我试图使消息的数组,但希望它通过课堂上给出的条件我的代码看起来像这样使不同的内部condtitional渲染:如何做反应,ES6地图功能

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>); 
    } 

回答

2

您可以轻松地将逻辑添加到您的地图。您只需要将内容不作为反应组件的内联返回。

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> 
    ); 
    }