Logi c для рендеринга компонента только один раз

Question

Мне нужна помощь с созданием логики c для моего компонента React. Если разделительная линия появляется на странице один раз, она не должна отображаться снова.

Итак, если я добавляю компонент на страницу, он стилизует текст под ним. Но если я попытаюсь снова добавить компонент на страницу, разделительную линию / стиль следует игнорировать. Я могу добавить его только один раз

Это мой код:

import React from 'react';
const Divider = () => (
  <>
    <hr className="divider"/>
  </>
);

/* Seperate css file */
hr.divider {
  height: 0;
  border: 0;
  border-top: solid 1px #cdcdcd;
}

hr.divider ~ p.story-text {
  font-size: 0.90rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  line-height: 1.75rem;
  color:#707174;
  @include text-styles(.75rem, 1.75em, "Gordita");
  @include breakpoint(tablet) {
    @include text-styles(.90rem, 2em, "Gordita");
  }
}

hr.divider ~ p.story-text:last-of-type {
  border-top: solid 1px red;
}

Answer 1

Вам необходимо использовать инструментальные средства LifeCycle, предоставляемые ReactJS. ComponenDidMount() загружается только один раз, когда класс загружается, но функция render() вызывается при каждом действии пользователя или приложения. Вот ссылка на ReactJS документы, рассказывающие, как использовать ComponentDidMount(): https://reactjs.org/docs/react-component.html#componentdidmount

Answer 2

Может быть лучше добавить условие в родительский компонент (тот, который вызывает Divider), но с учетом текущих фрагментов:

const Divider = () => (
  let dividers = document.getElementsByClassName('divider')
  if (dividers.length > 0) {
    return null
  } else {
    return <hr className="divider"/>
  }
);

Это не остановит ваш компонент от рендеринга. только остановит рендеринг более чем одного hr.