渲染中的三元运算符行为不正确-react答案

【问题标题】：Ternary operator inside render is not behaving correctly -react渲染中的三元运算符行为不正确-react
【发布时间】：2017-09-28 04:53:29
【问题描述】：

说实话，我对反应还很陌生，我试图根据某些条件使用选定的项目类选择器来呈现列表项。

我在下面尝试过

class AddEdit extends Component {
    constructor(props) {
        super(props);
        this.state = {
                      sections:[
                                  { name: 'address', label: 'Address', completed:'100',active:true},
                                  { name: 'description', label: 'Description', completed:'100',active:false},
                                  { name: 'sellers', label: 'Sellers', completed:'100',active:false},
                                  { name: 'solicitors', label: 'Solicitors', completed:'100',active:false},
                                  { name: 'listing_details', label: 'Listing Deatils', completed:'100',active:false},
                                  { name: 'library', label: 'Library', completed:'100',active:false},
                                  { name: 'reports', label: 'Reports', completed:'100',active:false}
                                ]
                    };
    }

然后我像下面这样迭代'

render() {
        return (
          <div> 
                         <ul className="component-wrapper-item">

                           {this.state.sections.map(section =>
                               {section.active ? (
                                                    <li class="component-wrapper-item-selected">
                                                        <div className='component-item-label-selected'>&nbsp;{section.label}</div>
                                                     </li>
                                                    )
                                                  :  (
                                                       <li class="component-wrapper-item">
                                                           <div className='component-item-label'>{section.label}</div>
                                                        </li>
                                                     )

                                }
                           )}

                         </ul>


              </div>
        );
    }

包含上述逻辑后没有显示列表项，任何想法

【问题讨论】：

标签： javascript reactjs ecmascript-6 rendering

【解决方案1】：

你忘了放return。另外你需要把key属性

render() {
        return (
          <div> 
               <ul className="component-wrapper-item">

                  {this.state.sections.map(section =>
                       { return section.active ? (
                            <li key={section.label} class="component-wrapper-item-selected">
                                  <div className='component-item-label-selected'>&nbsp;{section.label}</div>
                             </li>
                           )
                           :  (
                            <li  class="component-wrapper-item">
                              <div className='component-item-label'>{section.label}</div>
                            </li>
                          )

                       }
                    )}

                </ul>

              </div>
        );
    }

【讨论】：

这不是打字错误吗？
谢谢，其实我的眼睛还是不友好:)
@smit 很抱歉，但这里的错误与反应无关。它是一个 ES6 特性
@Rajesh : 真的.. 我对前端世界很陌生
IMO 它仍然对不熟悉 ECMA 6 语法的人有所帮助

【解决方案2】：

当您使用{} 将返回值包装在箭头函数中时，您必须编写return 来返回它。

【讨论】：

你可以只删除大括号