相邻的 JSX 元素必须用换行标记包裹在封闭标记中答案

【问题标题】：Adjacent JSX elements must be wrapped in an enclosing tag with line break tag相邻的 JSX 元素必须用换行标记包裹在封闭标记中
【发布时间】：2015-09-16 20:03:28
【问题描述】：

想象一下：

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 链接列表。到目前为止，减去这个因素的一切都有效。

总体而言，根本问题是美学问题。我正在使用引导程序，因为事情是相当统一的，我不想创建一次性类或内联样式来适应换行符。这纯粹是为了以后的可维护性。

【问题讨论】：

标签： javascript html backbone.js reactjs

【解决方案1】：

你需要一个包装根标签：

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

【讨论】：

其中有一个包裹标签，这总体上是多个child通过循环渲染的情况。主要示例是facebook.github.io/react/docs/…。因此，在这种情况下，就引导程序而言，将孩子与另一个父母一起包装会导致额外的标记
@chris 好吧，如果您尝试使用没有单个根标签的组件，react 只会说不，因此除非您想使用 display:block 设置锚点样式，否则不会转义。
将其包装在 <span> 中可能会有所帮助

【解决方案2】：

你可以用一个组件渲染许多“标签”，但它必须在一个“父标签”内，就像 Eelke 所说的那样。

另一种方法是在 render() 函数中声明一个变量并返回它：

render(){
    var step;
    if(this.props.gender==="male"){
        step = (
          <div>
            <p>A pessoa chamada {this.props.name} eh um homem! </p>
            <b>aqui</b>
          </div>
        );
    }else{
        step = (
          <div>
            <p>A pessoa chamada {this.props.name} eh uma mulher! </p>
            <b>aqui</b>
          </div>
        );
    }
    return step;
}

【讨论】：