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，未定义或为空数组时，将渲染您的元素（空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>
}

反应：在条件渲染器中映射元素

2 个答案: