如何使用 react 和 typescript 基於 prop 渲染圖標？

Question

我想根據名為 count 的道具顯示圖標。

我想做什么？ 我在子組件中有父組件和子組件，我想根據計數道具呈現圖標。

render = () => {
const count = 10; //got by http request and its value could be undefined, 0 or anything 
//above 0
return (
    <Wrapper>
        <LeftSide>
            <ContainerComponent>
                <ContentComponent>
                    items_count=10
                    icon_name='add'
                </ContentComponent>
           </ContainerComponent>
       </LeftSide>
       <RightSide>
           <ContainerComponent>
               <ContentComponent>
                   icon_name='delete'
               </ContentComponent>
           </ContainerComponent>
       </RightSide>
   </Wrapper>

)

const ContentComponent: React.FC<Props> = ({
  icon_name,
  count,
}) => {
    return (
        {condition1 && condition2 && 
            <firstdiv> 
               <seconddiv>
                   <Icon name={icon_name} />
               </seconddiv>
            </firstdiv>
        ))}
    )
}

現在在這里，您可以看到 Icon 組件顯示基於 icon_name 添加或刪除圖標。

現在我想在圖標添加中添加一個檢查，這樣當計數 < 1 時不應顯示此圖標。那么我如何更改上述代碼以獲得所需的 output。

我已經嘗試添加一個計數 < 1 的檢查，如下所示，但它不起作用，因為我需要的意思是當值大於 1 時不會同時呈現添加和刪除。

 return (
     {condition1 && condition2 && 
         {icon_name === 'add' && count && count < 1 ? return null : (
          <firstdiv> 
             <seconddiv>
                 <Icon name={icon_name} />
             </seconddiv>
         </firstdiv>
     ))}

有人可以幫我解決這個問題。 謝謝。

Answer 1

如果我理解正確，您需要額外的 ifs 嵌套。 也許像這樣？

if(!condition1 || !condition2 ) {
    return null;
}
if(icon_name === 'add') {
    return count && count < 1 ? return null : (
       <firstdiv> 
          <seconddiv>
              <Icon name={icon_name} />
           </seconddiv>
      </firstdiv>
} else {
    return <firstdiv> 
          <seconddiv>
             <Icon name={icon_name} />
           </seconddiv>
      </firstdiv>
}

通過像這樣分離代碼，可以更容易地跟蹤和添加條件。 你也可以這樣內聯它：

if(!condition1 || !condition2 ||(icon_name === 'add' && count && count < 1)) {
    return null;
}
return (
       <firstdiv> 
          <seconddiv>
              <Icon name={icon_name} />
           </seconddiv>
      </firstdiv>

Answer 2

我會以不同的方式解決這個問題。 在我看來，圖標的顯示/隱藏是父母的責任——如果它只是在那里顯示基於計數的圖標，則根本不需要渲染 RightSide。 也就是說，尚不清楚您的代碼中的condition1 1 和condition2 2 是什么意思，因為它們沒有作為道具傳遞給您的子組件，所以可能有一些原因 - 也許您可以澄清這些是什么？ 還有<firstdiv>等是否是自定義組件。

// Further up
<ParentComponent count={ 10 } />

const ParentComponent: React.FunctionComponent<Props> = ({ count }) => {
  return (
    <Wrapper>
      <LeftSide>
        <ContainerComponent>
          <ContentComponent icon_name="add" />
        </ContainerComponent>
      </LeftSide>
      { count > 0 && (
        <RightSide>
            <ContainerComponent>
              <ContentComponent icon_name="delete" />
            </ContainerComponent>
        </RightSide>
       )}
    </Wrapper>
  )
}

const ContentComponent: React.FunctionComponent<Props> = ({ icon_name }) => {
  return (
    <div className="whatever">
      <Icon name={ icon_name } />
    </div>
  )
}