文章/答案/技术大牛

发布

社区首页 >问答首页 >用细枝条件渲染反应元件

问用细枝条件渲染反应元件
EN

Stack Overflow用户

提问于 2017-11-14 00:04:13

回答 1查看 1.5K关注 0票数 1

我有后台应用程序在Symfony 3，我想进程前端，反应。我有两个组件，我使用树枝if/else条件来决定哪一个会被渲染

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

如果/否则工作良好，组件也呈现得很好，但每次只有其中一个.这是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>

这两个组件都呈现。什么主意？？

reactjs

twig

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-11-14 00:25:09

下面是正在发生的事情：

在服务器上，Twig计算表达式
<div id="compA"></div>或<div id="compB"></div>在HTML上生成，但两者都不生成。
服务器将HTML + JS (React)发送到浏览器
在浏览器中，JS尝试对#compA和#compB DOM元素进行呈现。
其中一个元素丢失了，因此会有一个错误。如果缺少第一个JS，则JS中断，第二个JS不呈现。

在index.js中，尝试：

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

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47275561

复制

相似问题

问用细枝条件渲染反应元件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用细枝条件渲染反应元件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用细枝条件渲染反应元件
EN