首页 文章

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

提问于
浏览 次
6

想像：

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

也尝试过

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

虽然脚本确实运行没有问题，但JSX编译器却被 <br> 标签打乱了，因为它在逻辑中只是一只孤独的狼而且它没有打开/关闭标记 .

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

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

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

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

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

javascript html backbone.js reactjs

2 回答

  • 10

    你需要一个包装根标签：

    <div>
    <a href={this.props.url}>{this.props.name}</a>
    </br>
</div>
    回复于
  • 0

    您可以使用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;
}
    回复于

相关问题