在树枝条件下渲染组件

Question

I have backend app in Symfony 3 and I would like process front-end which react. I have two components and I use twig if/else condition to decide witch one will be render

{% if some_condition %}
    <div id="compA"></div>
{% else %}
    <div id="compB"></div>
{% endif %}

If/Else working well and components are rendering well too, but every time only one of them... This one which is on first place in index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Login from './components/compA';
import Logout from './components/compB';
ReactDOM.render(<compA/>, document.getElementById('compA'));
ReactDOM.render(<compB/>, document.getElementById('compB'));

In this case if "some_conditon" true it renders compA, and if "some_conditon" false nothing happens if I switch last two rows (RenderDOM) CompA nothing happens and CompB working well... And if I do

<div id="compA"></div>
<div id="compB"></div>

Both components are render. Some idea??

Answer 1

Here is what is happening:

1. On the server, Twig PHP evaluates the expression

2. Either <div id="compA"></div> or <div id="compB"></div> gets generated onto HTML DOM, but not both.

3. The server sends the HTML + JS (React) to the browser

4. In the browser, the JS tries to do rendering on both #compA and #compB DOM elements.

5. One of the elements is missing, so there will be an error. If the first one is missing, the JS breaks and the second one does not render.

In index.js, try:

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

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