使用树枝条件渲染反应组件答案

【问题标题】：Render react component with twig conditions使用树枝条件渲染反应组件
【发布时间】：2017-11-14 00:04:13
【问题描述】：

我在 Symfony 3 中有后端应用程序，我想要处理前端的反应。我有两个组件，我使用 twig if/else 条件来决定一个将被渲染

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

If/Else 运行良好，组件渲染也很好，但每次只有其中一个......这个在 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'));

在这种情况下，如果“some_conditon”为 true，则呈现 compA，如果“some_conditon”为 false，则如果我切换最后两行 (RenderDOM) CompA 没有任何反应，并且 CompB 运行良好...如果我这样做了

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

两个组件都是渲染的。有什么想法？？

【问题讨论】：

在 index.js 中，应该是 ReactDOM.render(<Login/>, document.getElementById('compA')); 和 ReactDOM.render(<Logout/>, document.getElementById('compB')); 吗？
当你先渲染compA，当“some_condition”为假，什么也没发生，浏览器控制台是否显示错误？

标签： reactjs twig

【解决方案1】：

这是正在发生的事情：

在服务器上，Twig PHP 计算表达式
<div id="compA"></div> 或 <div id="compB"></div> 在 HTML DOM 上生成，但不能同时生成。
服务器将HTML+JS（React）发送到浏览器
在浏览器中，JS 尝试在 #compA 和 #compB DOM 元素上进行渲染。
缺少一个元素，所以会出现错误。如果缺少第一个，则 JS 中断，第二个不渲染。

在 index.js 中，尝试：

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

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

【讨论】：