Реагируйте JS визуализации элемента в Dom только одной html страницы в моем приложении Django

Question

У меня есть приложение Django с внешним интерфейсом в ReactJS ..

, в котором у меня есть два html файла и одно приложение. js с двумя классами ..

Мои проблемы заключаются в том, что React выполняет в приложении. js только первый сегмент строки рендеринга и не отображает элемент во второй строке на другой странице html? *

Рендеринг только два элемента, если у меня есть два идентификатора в одном файле html! Как это решить?!

первая html страница: индекс. html

{% extends 'base.html' %}

{% block content %}
    <div id='app'></div>
{% endblock %}

вторая html страница: arabic_home. html

{% extends 'base.html' %}

{% block content %}
    <div id='app_arabic'></div>
{% endblock %}

Приложение. js:

ReactDOM.render(<App />, document.getElementById('app')); {/* it only executes the first line */}
ReactDOM.render(<App_arabic />, document.getElementById('app_arabic'));

Answer 1

Наконец-то я нашел решение ,

*, не знаю почему *, но в моем случае это работало нормально:

с помощью условного случая в приложении. js, я визуализировал два элемента условно, и он хорошо работал на обеих html страницах ...

, теперь App.js выглядит так:

const indexElement = document.getElementById('app');
if (indexElement) {
    ReactDOM.render(<App />, indexElement);
}

const arabic_homeElement = document.getElementById('app_arabic');
if (arabic_homeElement) {
    ReactDOM.render(<App_arabic />, arabic_homeElement);
}