Рендеринг одного из компонентов, который находится внутри другого компонента в соответствии с состоянием

Question

Я столкнулся с проблемой рендеринга компонентов после условия. Оба компонента имеют внутри именно тот компонент, который должен отображаться, но не отображаться. Оба стиля имеют стилизованные компоненты.

В моем примере я хочу отобразить один компонент при нажатии на другой компонент (нижний колонтитул). В настоящее время у меня есть эта работа:

    <footer className={cx(styles.footer, { [styles.hideFooter]: hide })}>
        <StyledAboutContainer>
          <About />
        </StyledAboutContainer>
    </footer>

И я хочу преобразовать его в стиль компонента, и я борюсь. Я пытался сделать это:

     <StyledFooterContainer hide={false}>
        {hide ? StyledHideFooter : StyledFooter}
        <StyledAboutContainer>
          <About />
        </StyledAboutContainer>
    </footer>

CSS из них:

export const StyledFooterContainer = styled.div`
 max-height: 0;
`;

export const StyledFooter = styled.footer`
 background: #EFF0F4;
 color: #6782A4;
 display: flex;
 flex-flow: column nowrap;
 flex-grow: 1;
 max-height: 150px;
 font-size: 10pt;
 transition: .7s ease;
`;

export const StyledHideFooter = styled.div`
 max-height: 0;
`;

Спасибо.

Answer 1

Вы хотите определить, какой компонент нижнего колонтитула использовать перед оператором возврата:

const MyComponent = () => {
  // Determine the footer component to use
  const FooterComponent = hide ? StyledHideFooter : StyledFooter;

  // Render FooterComponent
  return (
    <StyledFooterContainer>
      <FooterComponent>
        <StyledAboutContainer>
          <About />
        </StyledAboutContainer>
      </FooterComponent>
    </StyledFooterContainer>
  );
};

Компоненты являются просто переменными, поэтому вы можете хранить их как таковые.