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

Question

I have this code. I am trying to figure how best to have the code conditionally put inside our outside of the wrapper. But I am not sure what is the best practice for this.

Basically, if the screen size is lets say 600 and below, that highlighted Styled.OverlayCTA should be rendered inside the wrapper rather than outside. And vice versa.

Here is my code:

<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>

I know of the method where we can do:

<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>
    
     }

But that seems a little undry. Is there a better practice than this? Thanks!

But that seems

Answer 1

In render, store the JSX of the thing you need to move around in a variable and then use that in the same way you did in the last method you mentioned.

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}
  </>
);

Though I should add, usually with this sort of thing, it can be solved with CSS breakpoints without DOM changes needed -- which is preferable. But that'd be an entirely different question.

Notably it can't always be solved that way depending on the circumstances of the desired layout. The above could be fine in your use case.