代码之家 › 专栏 › 技术社区 › halapgos1

仅部分发生反应条件渲染

react-bootstrap reactjs javascript

halapgos1 · 技术社区 · 6 年前

我有一个 react 将数组结果显示为 Badge Bootstrap React 图书馆)。在这种情况下,我检查数组的长度是否大于零,并使用 map 功能。我想添加额外的文本也显示在条件上,但由于某些原因,它没有显示 h1 标记徽章还在展示中。为什么不显示 h1 标签??

render() {
   const arr = this.state.items;
   return( 
    <Card>
     <Card.Body>
      <div>
       {arr.length > 0 && <h1>Additional Text</h1> &&
        arr.map((item) => 
        <Badge key={item.toString()} pill variant='primary'>
          {item}
        </Badge>
       }
     </div>
    </Card.Body>
   </Card>
);

5 回复 | 直到 6 年前

Ori Drori 6 年前

您正在使用 short circuit evaluation ,计算每个表达式(在 && )如果结果是假的,则返回结果;如果其他结果都是真实的,则返回最后一个结果。

在本例中,整个表达式的结果是有数组时映射的乘积,因为H1表达式生成的是一个对象,这始终是真实的。

要渲染H1,请使用两个单独的表达式:

render() {
   const arr = this.state.items;
   return( 
    <Card>
     <Card.Body>
      <div>
       {arr.length > 0 && <h1>Additional Text</h1>}
       {arr.length > 0 &&
        arr.map((item) => 
        <Badge key={item.toString()} pill variant='primary'>
          {item}
        </Badge>
       }
     </div>
    </Card.Body>
   </Card>
);

renderBadges(arr) {
  return (
    <>
      <h1>Additional Text</h1>
      {arr.map((item) => (
        <Badge key={item.toString()} pill variant='primary'>
          {item}
        </Badge>
      )}
    </>
  );
}

render() {
   const arr = this.state.items;
   return( 
    <Card>
     <Card.Body>
      <div>
       {arr.length > 0 && this.renderBadges(arr)}
     </div>
    </Card.Body>
   </Card>
);

Vivek V Dwivedi 6 年前

arr.length > 0 && <h1>Additional Text</h1> 计算结果为true,您将看到标记。

const getPills = (items) => {
    const pills = [<h1>Additional Text</h1>];
    items.forEach(item => {
        pills.push(
            <Badge key={item.toString()} pill variant='primary'>
                {item}
            </Badge>
        );
    })
    return pills;
};

render() {
   const arr = this.state.items;
   return( 
    <Card>
     <Card.Body>
      <div>
       {arr.length ? getPills(arr) : ''}
     </div>
    </Card.Body>
   </Card>
);

Aadil Mehraj 6 年前

尝试将内容包装在div中,因为您有相同的条件,所以不需要复制条件,如下所示:

render() {
   const arr = this.state.items;
   return( 
    <Card>
     <Card.Body>
       {arr.length > 0 && (
       <div>
        <h1>Additional Text</h1>
        {arr.map((item) => 
          <Badge key={item.toString()} pill variant='primary'>
            {item}
          </Badge>
        }
       </div>)
    </Card.Body>
   </Card>
);

Himanshu 6 年前

因为 &&

 render() {
 const arr = this.state.items;
 return( 
  <Card>
   <Card.Body>
    <div>
   {arr.length > 0 && <> <h1>Additional Text</h1>
    arr.map((item) => 
    <Badge key={item.toString()} pill variant='primary'>
      {item}
    </Badge>
    </>
   }
  </div>
 </Card.Body>
 </Card>
);

Dipesh Dulal 6 年前

从我看来,你是在试图用错误的条件语句。从文件中 here

expr1 && expr2 expr1 可以转换为 true ,返回 expr2 ;否则,返回 .

i、你的第一个表情 arr.length > 0 <h1>...</h1> 也被认为是真的。因此,计算并返回final表达式。

因此,要显示这两个组件,您可以使用片段,或者像其他人建议的那样使用多个条件或包装在 div

{
  arr.length > 0 && 
  <>
  <h1>Additional Text</h1>
  {
     arr.map((item) => 
        <Badge key={item.toString()} pill variant='primary'>
          {item}
        </Badge>
  }
  </>        
}

在这里, <> </> 是缩写 <React.Fragment> </React.Fragment> 它会给你一个你想要的树结构。