javascript - 相邻的 JSX 元素必须包含在带有换行标记的封闭标记中

Question

想象一下:

return (<a href="{this.props.url}">{this.props.name}</a><br>)

也尝试过

return (<a href="{this.props.url}">{this.props.name}</a><br />)

虽然脚本运行没有问题，但 JSX 编译器被 <br> 扰乱了标签，因为它是逻辑中的孤狼，并且没有打开/关闭标签。

另一方面，如果我删除了 <br>

return (<a href="{this.props.url}">{this.props.name}</a>)

没有抛出任何错误，就问题所在而言，非常 self 解释。然而，问题是如何解决根本问题。我怎样才能拥有那个标签(或者如果需要的话，它的等价物)。在上述每一条渲染语句之后添加。

假设，这是一个 url/names 循环，在页面上生成一个 html 链接列表。到目前为止，减去这个因素的一切都有效。

总体而言，根本问题是美学问题。我使用的是 bootstrap，在这方面它们相当统一，我不想创建一次性类或内联样式来适应换行符。这纯粹是为了以后的可维护性。

Answer 1

您需要一个包装根标签:

<div>
    <a href={this.props.url}>{this.props.name}</a>
    </br>
</div>