css 尝试基于屏幕宽度在 Package 器内部或外部有条件地呈现样式化组件时的最佳实践

w1jd8yoj  于 2022-12-20  发布在  其他
关注(0)|答案(1)|浏览(78)

我有这段代码。我试图找出如何最好地有条件地把代码放在我们的 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>
    
     }

但是那似乎有点脏。有比这更好的练习吗?谢谢!
不过,看起来

gfttwv5a

gfttwv5a1#

在render中,将需要移动的东西的JSX存储在一个变量中,然后按照前面提到的方法使用它。

const overlay = (
  <CTAButton
    colorStyle={el.ctaColor === "green" ? "green" : "black"}
    href={el?.cta?.link}
  >
    {el?.cta?.text}
  </CTAButton>
);

// ...

return (
  <>
    <Styled.OverlayWrapper>
      {el.headline && (
        <Styled.HeroHeadline as="h4">{parse(el.headline)}</Styled.HeroHeadline>
      )}
      {screenWidth <= 600 && overlay}
    </Styled.OverlayWrapper>
    {screenWidth >= 601 && overlay}
  </>
);

尽管我应该补充一点,通常对于这类事情,它可以用CSS断点来解决,而不需要更改DOM--这是更可取的,但那是一个完全不同的问题。
很明显,根据所需布局的具体情况,并不总是能用这种方法解决问题。上述方法在您的用例中可能很好。

相关问题