React：映射条件渲染中的元素

Question

我试图在条件渲染中映射出一个数组。我的li元素闪烁一瞬间然后消失。我不确定我做错了什么。

{ 
  (this.props.rootOb.label == 'type') &&
  <div className="root-name">
    {
      this.state.features.map((feature,index) =>
        <div><li key={index}>hi</li></div>
      )
    }
  </div>
}

Answer 1

你没有关闭div。在li标签中列出ul也更好。它应该如下。

{this.props.rootOb.label == "type" && (
   <div className="root-name">
      <ul>
          {
            this.state.features.map((feature, index)=>{
                return <li key={index}>hi</li>
            })
          }
      </ul>
   </div>
)}

Answer 2

关键问题是当你有标签但功能仍然是null，undefined或空数组时，你的元素（空div）会被渲染。一旦你获得了这些功能，它就会被渲染，因此你会看到闪烁的效果。因此，请务必仅在有功能时进行渲染：

{ 
  (this.props.rootOb.label == 'type') &&
  this.state.features && this.state.features.length &&
  <div className="root-name">
    {
      this.state.features.map((feature,index) =>
        <div><li key={index}>hi</li></div>
      )
    }
  </div>
}

另外，我怀疑你父母是否有ul标签？一定要有。

注意：ul标签不能直接使用div标签。您需要使用li标签，然后您可以在其中使用div标签。

{ 
  (this.props.rootOb.label == 'type') &&
  this.state.features && this.state.features.length &&
  <ul className="root-name">
    {
      this.state.features.map((feature,index) =>
        <li key={index}>hi</li>
      )
    }
  </ul>
}