Question

我有一个简单的onMouseOver / onMouseLeave函数，用于更改状态。如果状态具有特定值，则会显示一个组件。到目前为止一切顺利。

我使用“反应显示”使其平滑显示。

可悲的是，尽管组件正确显示，但它位于另一行。但是，由于JSX条件直接放在p行中，因此它应该显示内联：

<p onMouseOver={()=> this.arrow(1)} onMouseOut={()=> this.arrow(0)}> 
    <Link to="/">LEARN MORE 
    {this.props.aboutArrow === 1 ? <Fade bottom>&#x2192;</Fade> : null}
    </Link>
</p>

如何显示与“了解更多信息”一致的小箭头（十六进制代码＆＃x2192，在内部）？

Answer 1

您可以通过在CSS上添加Link来激活display: flex标签中的flex。默认情况下，它将强制所有内容保持在同一行。

该空间可能会消失，因此您也可以将整个条件语句放在span内，并保持margin-left的距离。

Answer 2

问题在于React展示可能渲染了<div>，请参见the source code。由于<div>在默认情况下显示为块，因此它以新行结尾。您可以将其显示更改为与CSS内联，但是在<div>中包含<a>无效的HTML。

在条件渲染中内联显示组件

2 个答案: