Question

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

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

如果/ 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'));

在这种情况下，如果＆＃34; some_conditon＆＃34;是的，它呈现compA，如果＆＃34; some_conditon＆＃34;假如果我切换最后两行没有任何反应（RenderDOM）CompA没有任何反应，CompB运行良好...如果我这样做

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

两个组件都是渲染。有些想法??

Answer 1

以下是发生的事情：

在服务器上，Twig PHP评估表达式
{DOM}生成<div id="compA"></div>或<div id="compB"></div>，但不是两者都生成。
服务器将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'));
}

用枝条条件渲染反应组分

1 个答案: