如何使用 react 和 typescript 不显示基于道具值的图标？

Question

我想使用 react 和 typescript 显示基于道具值的图标。

我想做什么？ 我有一个使用 ContentComponent 的 ContainerComponent ，它显示一个图标。 这个 ContentComponent 是一个可重用的组件。

下面是我的 ContainerComponent

render = () => {
    const value = 10;
    return (
        <Wrapper>
            <LeftSide>
                <ContainerComponent>
                    <ContentComponent>
                        value=10
                        icon_name='add'
                    </ContentComponent>
                </ContainerComponent>
            </LeftSide>
            <RightSide>
                <ContainerComponent>
                    <ContentComponent>
                        value=10
                        icon_name='delete'
                    </ContentComponent>
                </ContainerComponent>
            </RightSide>
        </Wrapper>
    )
}

ContentComponent 呈现图标，如下所示，

const ContentComponent: React.FC<Props> = ({
    icon_name,
    value,
}) => {
    return (
        <Icon name={icon_name}/>
    )
}

此图标组件显示图标添加和删除。 现在的问题是我只想在值大于 0 时才显示添加图标。

如何将条件添加到 ContentComponent 以便仅在值大于 0 时才呈现添加图标。

注意：容器和内容组件肯定会有一些其他元素要渲染。只是 ContentComponent 中的图标需要根据值和名称是否显示为“add”...名称为“delete”的图标将被显示总是不管值是多少。

有人可以帮我解决这个问题。 谢谢。

Answer 1

您可以在 JSX 中使用内联 if ( && ) 通过用括号括起来有条件地呈现内容：

return (
    <Wrapper>
        {value > 0 &&
            <LeftSide>
                <ContainerComponent>
                    <ContentComponent>
                        value=10 icon_name='add'
                    </ContentComponent>
                </ContainerComponent>
            </LeftSide>
        }
        <RightSide>
            <ContainerComponent>
                <ContentComponent>
                    value=10 icon_name='delete'
                </ContentComponent>
            </ContainerComponent>
        </RightSide>
    </Wrapper>
)

如果它不需要知道这个变量，你也可以从你的 Icon 中删除value属性。

Answer 2

如果值小于 1，您可以简单地返回 null。

const ContentComponent: React.FC<Props> = ({
    icon_name,
    value,
}) => {
    if(value<1 && icon_name=='add')
        return null
    return (
          <Icon name={icon_name}/>
    )
}

由于您没有使用ContentComponent中的value ，因此您可以像这样在父组件中进行检查：

render = () => {
    const value = 10;
    return (
        <Wrapper>
            <LeftSide>
                <ContainerComponent>
                    {value>0 && <ContentComponent icon_name='add'/>}
                </ContainerComponent>
            </LeftSide>
            <RightSide>
                <ContainerComponent>
                    <ContentComponent icon_name='delete'/>
                </ContainerComponent>
            </RightSide>
        </Wrapper>
    )
}

Answer 3

如果只有两个图标，则不需要在 props 中传递icon_name 。

const ContentComponent: React.FC<Props> = ({
    value,
}) => {
    return (
        <>{ 
            value > 0 ? <Icon name="delete" /> : <Icon name="add" />
          }
        </>
    )
}