Как лучше выводить условный компонент в react?

Question

[devdev10111]

привет! есть задача: выводить блок в зависимости от значения в глобальном стейте.
есть два варианта реализации:

function Page() {
  const showBanner = useSelector((state) => state.showBanner);

  return (
    <div>
      // page
      {showBanner && <Banner />}
      // page
    </div>
  );
}

недостаток в том, что баннер нужно выводить сразу на нескольких страницах. и подписываться на state.showBanner в нескольких местах кажется не очень решение (дублирование кода как минимум). Нормальной ли практикой является следующая реализация?

function BannerWrapper() {
  const showBanner = useSelector((state) => state.showBanner);

  return showBanner && <Banner />;
}

function Page() {
  const showBanner = useSelector((state) => state.showBanner);

  return (
    <div>
      // page
      <BannerWrapper />
      // page
    </div>
  );
}

то есть обернуть Banner в компонент (BannerWrapper), который будет получать значение из стора и выводить Banner если значение true. А в нужных местах просто выводить . И если это решение лучше, как лучше назвать BannerWrapper? Кажется, что Wrapper не очень интуитивно понятный префикс

Comments

[szQocks]

сделай разные обертки для страниц, где нужен баннер , там одна обёртка, где не нужен там другая

либо можешь сделать одну обёртку но передавать в неё пропсы и в зависимости от просов внутри обортки отображать баннер или нет