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

没有抛出错误，问题很明显。然而问题是如何解决根本问题。我该如何在上述渲染语句之后添加该标签（或等效标签）？

需要假设的事情是，这是一个循环的URL /名称，会在页面上生成链接的HTML列表。到目前为止，除了这个因素之外，一切都正常。

总体上，根本问题是美学问题。我正在使用Bootstrap，在那里一切都相当统一，我没有希望创建一次性类或内联样式来适应换行。这只是为了将来的可维护性。

- chris

Answer 1

您需要一个包装根标签：

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

- Eelke

---

如果有一个包装标签，这通常是通过循环渲染多个子元素的情况。主要示例是 https://facebook.github.io/react/docs/multiple-components.html#dynamic-children。因此，在这种情况下，将子元素用另一个父元素包装会导致额外的标记，就 Bootstrap 而言。 - chris

@chris 好的，React 会简单地拒绝没有单一根标签的组件，所以除非你想使用 display:block 样式来处理 anchor，否则无法避免这个问题。 - ivarni

或许将其包裹在 <span> 标签中会有所帮助。 - Eelke

Answer 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;
}

- Caio Saldanha