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

w1jd8yoj 于 2022-12-20 发布在其他

关注(0)|答案(1)|浏览(94)

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

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

css

来源：https://stackoverflow.com/questions/74855531/best-practice-when-trying-to-conditionally-render-a-styled-component-inside-or-o

1条答案

按热度按时间

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--这是更可取的，但那是一个完全不同的问题。
很明显，根据所需布局的具体情况，并不总是能用这种方法解决问题。上述方法在您的用例中可能很好。

赞(0）回复(0）举报 2022-12-20

我来回答

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

1条答案

相关问题

热门标签

最新问答