尝试根据屏幕宽度在包装器内部或外部有条件地呈现样式组件时的最佳实践

Question

我有这个代码。我正试图弄清楚如何最好地有条件地把代码放在包装器的外部。但我不确定这方面的最佳实践是什么。

但这似乎有点不值一提。还有比这更好的做法吗?谢谢!

但这似乎

Answer 1

在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——这是可取的。但那将是一个完全不同的问题。

值得注意的是，根据所需布局的情况，并不能总是这样解决。以上内容在您的用例中可能很好。