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

坦白地说，我是个新手，我试图根据某些条件使用选定的项目类选择器来呈现列表项目。

我在下面尝试

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

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

最佳答案

您忘了放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>
        );
    }

关于javascript - 渲染中的三元运算符行为不正确- react ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46461213/