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.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>
)}