条件渲染反应问题答案

【问题标题】：Conditional rendering react issue条件渲染反应问题
【发布时间】：2018-01-25 22:55:35
【问题描述】：

为了更清楚，我做了一个code sandbox here。

我想在我的渲染方法的某个部分使用条件渲染，但我正在努力实现这一点。

此时我正在努力有条件地渲染group.code === "TEST" && group.markets.length == 3 ?

我收到以下错误

语法错误：意外标记，预期，(252:15)

我的代码如下：

class Example extends Component {    
  render() {        
    return (          
      <div className="Container">    
        {
          groups.map(group => {    
          return (    
            <div key={group.id}>    
              {
                groups.length > 1 &&
                <h4 className="GroupHeader">{group.label}</h4>
              }    
              {
                group.code === "TEST" && group.markets.length == 3 ? 
                (
                  <div>
                    <p>UPDATING GROUP...</p>
                  </div>
                ) : (    
                    {
                      group.map(g => {    
                        const groupObj = {
                          id: g.g_id
                        };    
                        return (
                          <Group 
                            key={groupObj.id}
                            {...groupObj}
                          />
                        );    
                      })
                    }    
                )    
              }        
            </div>
          )
        })            
      }    
      </div>
    );
  }    
}

【问题讨论】：

将地图内容包装在 div group.code === "TEST" && group.markets.length == 3 ? ( <div> <p>UPDATING GROUP...</p> </div> ) : ( <div>{ group.map() 中的 else 条件中，只要您正确导出组件并从 React 导入组件，它应该可以工作
@ShubhamKhatribeautiful！想要将其添加为带有解释的答案？

标签： reactjs ecmascript-6

【解决方案1】：

将您的映射内容包装在 div 内的 else 条件中，因为返回的值需要单个元素

class Example extends Component {    
  render() {        
    return (          
      <div className="Container">    
        {
          groups.map(group => {    
          return (    
            <div key={group.id}>    
              {
                groups.length > 1 &&
                <h4 className="GroupHeader">{group.label}</h4>
              }    
              {
                group.code === "TEST" && group.markets.length == 3 ? 
                (
                  <div>
                    <p>UPDATING GROUP...</p>
                  </div>
                ) : (    
                    <div>{
                      group.map(g => {    
                        const groupObj = {
                          id: g.g_id
                        };    
                        return (
                          <Group 
                            key={groupObj.id}
                            {...groupObj}
                          />
                        );    
                      })
                    }</div>
                )    
              }        
            </div>
          )
        })            
      }    
      </div>
    );
  }    
}

【讨论】：