React は、さまざまな条件に従って対応するコンポーネントをレンダリングします

条件を判断し、異なる条件下で異なるコンポーネントをレンダリングする:
ele.PlantingCrop が異なる値である場合、ここでレンダリングされるコンポーネントも異なります。特定の ES6 構文シュガーはコードに示されています: {
condition && (component)}

{
    
    ele.PlantingCrop === '种植中' && (
 <Tag color="rgba(55, 58, 58, 1)">
   <p style={
    
    {
    
     color: 'rgba(63, 217, 163, 1)' }}>种植中</p>
 </Tag>
)}
{
    
    ele.PlantingCrop === '已收获' && (
 <Tag color="rgba(55, 58, 58, 1)">
   <p style={
    
    {
    
     color: 'white' }}>已收获</p>
 </Tag>
)}

props.editorInfo が「true」値の場合、ES6 構文糖衣は次のようになります。
{Condition? (コンポーネント 1): (コンポーネント 2)}
たとえば、props の値を判断するには:

{
    
    props.editorInfo ? (
 <Tag color="rgba(55, 58, 58, 1)">
   <p style={
    
    {
    
     color: 'rgba(63, 217, 163, 1)' }}>种植中</p>
 </Tag>
):(
 <Tag color="rgba(55, 58, 58, 1)">
   <p style={
    
    {
    
     color: 'white' }}>已收获</p>
 </Tag>
)}