内部渲染中的三元运算符表现不正确 - 反应

Question

老实说，我是新手，我试图根据某些条件使用选定的项目类选择器渲染列表项。

我在下面试过

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

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

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

Answer 2

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