如何在一个可重用的组件中使用react和typescript修复对象可能未定义的错误？

Question

当我使用变量" items_count "时，我得到错误的对象可能是未定义的。

我有一个ContainerComponent，使用ContentComponent显示一个图标。这个ContentComponent是一个可重用的组件。

下面是我的ContainerComponent

render = () => {
    const items_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>
   ) 

}

ContentComponent渲染了Icon，它看起来像下面的样子。

const ContentComponent: React.FC<Props> = ({
    icon_name,
    items_count,
}) => {
    return (
        {condition1 && condition2 &&
            (icon_name === 'add' && items_count < 1 ? null : ( //here i get error object items_count 
            //could be possibly undefined
                <firstdiv>
                   <seconddiv>
                       <Icon name={icon_name} />
                   </seconddiv>
                </firstdiv>
            ))}
    )
}

为了解决这个错误，我尝试了以下的方法。

return (
    {condition1 && condition2 && items_count && //added a check here
        (icon_name === 'add' && items_count < 1 ? null : (
            <firstdiv>
                <seconddiv>
                    <Icon name={icon_name} />
                </seconddiv>
            </firstdiv>
     ))}
)

但正如你在ContainerComponent右侧组件中看到的那样，我没有传递 items_count，而在 ContentsComponent中，我希望这个名称为delete的图标总是呈现，而不考虑 items_count的值。

我的代码段中的检查有效，但给出了 item_count 可能是未定义的错误信息。

Answer 1

这将始终显示 delete 图标，有时是 add 图标将与删除图标并列显示。

/* U just need to change the structure of your code
*/
const ContentComponent: React.FC<Props> = ({
    icon_name,
    items_count,
}) => {
    const renderIcon = () => {
      if(!condition1 || !condition2 || !items_count) return null
      return (
        <firstdiv>
           <seconddiv>
               <Icon name='delete'} />
               {items_count > 0 ? <Icon name='add'} /> : null }
           </seconddiv>
        </firstdiv>
      )
    }

    return (
      <>
        {renderIcon()}
      </>
    )
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>