基于三元语句有条件地向 React 组件添加更多 JSX

Question

I currently have quite a complex (re-used component). I basically have a scenario whereby I use the value of renderPlanB (equates to true or false), and if true, we add various JSX elements. My current implementation looks like this but it repeats too much code. I don't want to make them separate components as changes to the base functionality would then need to be made in both. Any ideas on a clean re-factor?

    return renderPlanB ? (
      <>
        {options.map(option)}
        <StyledRow>
          {variousOptions.map((opt) => (
            <StyledLabel
               variousProps={variousProps}
               variousProps={variousProps}
            />
          ))}
        </StyledRow>

        <RepeatingComponent
           variousProps={variousProps}
           variousProps={variousProps}
        >
          {errors}
          <StyledContainer>
            <StyledProgress>{index + 2}</StyledProgress>
            <StyledEnteredCountries>
              {variousOptions.map(option)}
            </StyledEnteredCountries>
          </StyledWrappingContainer>
        </RepeatingComponent>
      </>
    ) : (
      <>
        {options.map(option)}
        <StyledRow>
          {variousOptions.map((opt) => (
            <StyledLabelOptionTwo
               variousProps={variousProps}
               variousProps={variousProps}
            />
          ))}
        </StyledRow>
        <RepeatingComponent
           variousProps={variousProps}
           variousProps={variousProps}
        >
          {errors}
          <StyledRow>
            {variousOptions.map(option)}
          </StyledRow>
        </RepeatingComponent>
      </>
    );

As you can see, they both carry out the same logic, however, when renderPlanB is true, we render some additional Styled Components.

Answer 1

Contrived, but maybe try separating out...

return (
<>  
  <DefaultPlanComponents/>
  {renderPlanB && <PlanBComponentsHere/>}
</>
)

Answer 2

I solved this issue by checking the renderPlanB higher in the component tree (the component in the questions parent) so it looked like this:

{renderPlanB ? (
   <NewComponent {...sharedProps} />
) : (
   <DefaultComponent {...sharedProps} />
)}

I then just created a const of sharedProps that I spread into both components (as they shared props) and this reduced the lines of code significantly:

  const sharedProps = {
    prop1: prop1,
    prop2: prop2,
    prop3: prop3,
    prop4: prop4,
  };