React.js renderDOM условно

Question

Я новый, чтобы реагировать. У меня есть вопрос о визуализации с reactDom:

index.js

import ReactDOM from 'react-dom'; 
import A from 'components/A'; 
import B from 'components/B'; 

render(<A />, document.getElementById('A')); 
render(<B />, document.getElementById('B')); 

Я хочу, чтобы показать что-то вроде

• визуализации на странице А

• визуализации B на странице B Проблема заключается в том, что я определяю A и B вместе на index.js, поэтому на странице A (здесь нет элемента ID), он будет показывать ошибку, как показано ниже, потому что у React нет e lementId B на странице с

  Invalid Нарушение Регистрация Компонент Цель контейнера не является DOM элемент

Проверка по пути, как React and Browserify Register Component Error может исправить это тоже, или проверка elementid (существует или нет) перед вызовом render.

Я хотел бы знать, если это правильный способ решить такой случай, или есть другой способ?

Answer 1

попробовать что-то вроде этого:

if (document.getElementById('A')) { 
    render(<A />, document.getElementById('A')); 
} 

if (document.getElementById('B')) { 
    render(<B />, document.getElementById('B')); 
} 

Это самый простой и простое решение вашей проблемы (это не самый чистый и не самое лучшее решение, но это легче понять при обучении Реагировать и как он работает с DOM). Он не будет отображать <A />, если он не может найти контейнер A, и он не будет отображать <B />, если не удается найти B контейнер.