必须将相邻的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>)

没有抛出任何错误,就问题而言,这是非常自我解释的.但问题是如何解决潜在的问题.我怎么能有这个标签(或者如果需要的话还有它的等价物).在上述每个渲染语句之后添加.

需要注意的是,这是一个urls/names循环,它在页面上生成一个html链接列表.到目前为止减去这个因素的一切都有效.

总体而言,潜在的问题是美学问题.我正在使用bootstrap,因为事情是相当统一的,我不想创建一次性类或内联样式来适应换行符.这纯粹是出于可维护性的考虑.

Answer 1

你需要一个包装根标签:

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