条件渲染反应问题

Question

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

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