我有这段代码。我试图找出如何最好地有条件地把代码放在我们的 Package 器外面。但我不知道什么是最好的做法。
基本上,如果屏幕大小是600或更小,那么高亮显示的Styled.OverlayCTA
应该呈现在 Package 器内部而不是外部,反之亦然。
下面是我的代码:
<Styled.OverlayWrapper>
{el.headline && (
<Styled.HeroHeadline as="h4">
{parse(el.headline)}
</Styled.HeroHeadline>
)}
</Styled.OverlayWrapper>
<Styled.OverlayCTA
ctaPosition={determineCtaPosition(el.heroCtaPosition)}
>
<CTAButton
colorStyle={el.ctaColor === 'green' ? 'green' : 'black'}
href={el?.cta?.link}
>
{el?.cta?.text}
</CTAButton>
</Styled.OverlayCTA>
我知道我们可以做的方法:
<Styled.OverlayWrapper>
{el.headline && (
<Styled.HeroHeadline as="h4">
{parse(el.headline)}
</Styled.HeroHeadline>
)}
{screenWidth <= 600 && <Styled.OverlayCTA
ctaPosition={determineCtaPosition(el.heroCtaPosition)}
>
<CTAButton
colorStyle={el.ctaColor === 'green' ? 'green' : 'black'}
href={el?.cta?.link}
>
{el?.cta?.text}
</CTAButton>
</Styled.OverlayCTA>
}
</Styled.OverlayWrapper>
{ screenWidth >= 601 && <Styled.OverlayCTA
ctaPosition={determineCtaPosition(el.heroCtaPosition)}
>
<CTAButton
colorStyle={el.ctaColor === 'green' ? 'green' : 'black'}
href={el?.cta?.link}
>
{el?.cta?.text}
</CTAButton>
</Styled.OverlayCTA>
}
但是那似乎有点脏。有比这更好的练习吗?谢谢!
不过,看起来
1条答案
按热度按时间gfttwv5a1#
在render中,将需要移动的东西的JSX存储在一个变量中,然后按照前面提到的方法使用它。
尽管我应该补充一点,通常对于这类事情,它可以用CSS断点来解决,而不需要更改DOM--这是更可取的,但那是一个完全不同的问题。
很明显,根据所需布局的具体情况,并不总是能用这种方法解决问题。上述方法在您的用例中可能很好。