如何使用反应条件渲染？答案

【问题标题】：How to use react conditional rendering?如何使用反应条件渲染？
【发布时间】：2020-12-10 09:52:22
【问题描述】：

如果 test.space_above = true 在我正在映射的数据上，我希望能够显示网格行间隙。

 {sortedUnitTestTemplates.map(test =>
      <div key={test.id} className='Table CreateUnitTestsGrid' style={{cursor: 'pointer'}} onClick={() => onTestTypeClick(test.id)}>


        <div>{test.test_type}</div>
        <div style={{width: '150px'}}>
          {!test.typical_dq_domain ? null :
            <Chip 
              label={test.typical_dq_domain}
              className='Badge' 
              style={{
                width: '100%', 
                color: getColor('fg', test.typical_dq_domain), 
                backgroundColor: getColor('bg', test.typical_dq_domain)
              }}
            />
          }
        </div>
      </div>
    )}
  </div>

【问题讨论】：

这能回答你的问题吗？ React Conditional Rendering

标签： reactjs

【解决方案1】：

有点不清楚你想要这个差距如何以及在哪里......但我在这里添加边距：

{sortedUnitTestTemplates.map(test =>
      <div key={test.id} className='Table CreateUnitTestsGrid' style={{cursor: 'pointer'}} onClick={() => onTestTypeClick(test.id)}>


        <div>{test.test_type}</div>
        <div style={{width: '150px', marginTop: test.space_above ? '100px' : 0 }}>
          {!test.typical_dq_domain ? null :
            <Chip 
              label={test.typical_dq_domain}
              className='Badge' 
              style={{
                width: '100%', 
                color: getColor('fg', test.typical_dq_domain), 
                backgroundColor: getColor('bg', test.typical_dq_domain)
              }}
            />
          }
        </div>
      </div>
    )}
  </div>

【讨论】：

【解决方案2】：

// { condition && function()}

{test.typical_dq_domain && 
    <Chip 
        label={test.typical_dq_domain}
        className='Badge' 
        style={{
           width: '100%', 
           color: getColor('fg', test.typical_dq_domain), 
           backgroundColor: getColor('bg', test.typical_dq_domain)
        }}
    />
}

你也可以查看这篇文章8 conditional rendering methods in React

【讨论】：