Javascript 在React中渲染空空间

请参阅下面的代码片段。我试图呈现一个闪烁的文本，当它不出现时，会留下一个空白。然而，React似乎只是将元素一起移除。如何在React中正确渲染空白？试图用不同的跨度进行一些搜索和测试，但仍然没有成功。谢谢

类闪烁器扩展React.Component{
建造师（道具）{
超级（）；
此.state={
出现：正确
}
this.blinker=this.blinker.bind（this）；
}
闪烁器（）{
this.setState（{seen:！this.state.seen}）；
}
componentDidMount（）{
设置时间间隔（此.blinker，1000）
}
组件将卸载（）{
clearInterval（该闪烁器）；
}
render（）{
const name=“测试”；
常量下划线=“389;”；
const com=“com”；
返回(
{name}
{（this.state.appease）？下划线：'}
{com}
);
}
}
ReactDOM.render（，app）
#测试{
显示：内联块；
}


类闪烁器扩展React.Component{
建造师（道具）{
超级（）；
此.state={
出现：正确
}
this.blinker=this.blinker.bind（this）；
}
闪烁器（）{
this.setState（{seen:！this.state.seen}）；
}
componentDidMount（）{
设置时间间隔（此.blinker，1000）
}
组件将卸载（）{
clearInterval（该闪烁器）；
}
render（）{
const name=“测试”；
常量下划线=“389;”；
const com=“com”；
返回(
{name}
{（this.state.appease）？下划线：“\u00a0\u00a0”}
{com}
);
}
}
ReactDOM.render（，app）
#测试{
显示：内联块；
}
尚未测试它，但它应该可以工作


{{下划线}}
您可以使用
：


类闪烁器扩展React.Component{
建造师（道具）{
超级（）；
此.state={
出现：正确
}
this.blinker=this.blinker.bind（this）；
}
闪烁器（）{
this.setState（{seen:！this.state.seen}）；
}
componentDidMount（）{
设置时间间隔（此.blinker，1000）
}
组件将卸载（）{
clearInterval（该闪烁器）；
}
render（）{
const name=“测试”；
常量下划线=“389;”；
const com=“com”；
返回(
{name}
{（this.state.appease）？下划线：}
{com}
);
}
}
ReactDOM.render（，document.getElementById（'app'））
#测试{
显示：内联块；
}
这是因为三条嵌套行作为父div元素的单个子元素传输，而不考虑空格。解决方案是在元素之间明确放置一个空格：

<div>
    <div id="test"> { name } </div>
    {''}
    <div id="test">
          { (this.state.appear) ? underScore : "\u00a0\u00a0"}
    {''}
    </div>
        <div id="test"> { com } </div>
</div>


{name}
{''}
{（this.state.appease）？下划线：“\u00a0\u00a0”}
{''}
{com}
我通常使用
，并以编程方式渲染任意次数。以下是拟嵌入的3个不同特殊字符的另一个类似用法。页面上不能有三个“测试”ID。如果不是像现在这样添加或删除文本，而是在div上添加或删除
style=“display:none；”“
？@SaidKholov，你可以。你真的，真的不应该。很好地应用这样的样式是行不通的
#test{display:inline block；}
@paulhicks为元素添加宽度。或者在删除它时使用
可见性：hidden
！我以前确实试过，现在我知道了！如果我们试图呈现一个存储在变量中的值（该变量是只读的，并且包含额外的空间），该怎么办？在我看来，它在渲染后立即删除了额外的空间（发生在我工作时）。这让我发疯，因为我甚至不能更改值（通过道具）。我想你可能确实是故意这么做的，但是你能解释一下
{''}
（即发出一个零长度字符串）（例如，相对于
{'}
，我认为肯定会发出一个空格）的效果吗？