Блог

На данный момент у меня есть следующая переменная, которая отображает начальное состояние, которое загружается…. Это не то , чего я хочу, я хочу получить окончательный отрисованный html-код компонента после загрузки.

Переменная белое пусть popup_content = ReactDOMServer.renderToString();

Компонент, начальное состояние которого мне не нужно, но конечное состояние в виде html.

 function PopupBetaContent(props) {

  const id = props.id;
  const omm = props.outdoor_map_marker;
  const [popup_content, setPopupContent] = useState(null);
  


  useEffect(() => {
    
    axios
      .get(process.env.NEXT_API.concat('/',id), config)
      .then(res => {
        const popup_result = res.data;
        const status = res.status;

        if (status === 200) {
          if (popup_result !== null) {
            setPopupContent(popup_result);
          } else {
            location.replace('/500');
          }

        } else {
          location.replace('/500');
        }

      })
      .catch(err => {
        location.replace('/500');
      });

  }, [id]);


  if ((popup_content !== null) amp;amp; (loading !== false)) {

    return (
      <>

        <div>
          {popup_content.name}

        </div>
    );
  } else {
    return <>loading....</>;
  }

}

export default PopupContent;
 

Вы можете вернуться null , чтобы ничего не отображать, вместо текста «загрузка…».

Предотвращение рендеринга компонента

В редких случаях вы можете захотеть, чтобы компонент скрывал себя, даже если он был отрисован другим компонентом. Чтобы сделать это, вернитесь null вместо вывода рендеринга.

 return (popup_content !== null amp;amp; !loading)
  ? (
    <div>
      {popup_content.name}
    </div>
  )
  : null;