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>

Answer 2

您可以使用Component渲染许多“标记”，但它必须位于“父标记”内，就像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;
}

必须将相邻的JSX元素包装在带有换行符标记的封闭标记中

2 个答案: