ReactJS在HTML中创建额外的跨度

ReactJS creating extra spans in HTML

本文关键字：创建 HTML ReactJS      更新时间：2023-09-26

我已经开始做一个项目，并继承了大量的ReactJS，我正在尝试整理和更好地理解。 目前，我正在尝试在我正在处理的应用程序中解决一个小问题。

下面是渲染的代码：

render: function() {
return (
  <div className="finish-content-container">
    <div className='finish-instructions'>
      <span>
        {this.props.finishInfo.startpage.instructions || ""}
      </span>
    </div>
    {
    this.props.userData.score && !this.props.finishInfo.finishpage.hideScore ?
    <div className="finish-results">
      <span>{"Your Score: " + (this.props.userData.score || "")}</span>
    </div> : ""
    }
    {
    this.props.finishInfo.finishpage && this.props.finishInfo.finishpage.graph ?
      <div className="finish-graph">
        <div dangerouslySetInnerHTML={{__html: processStoredGraph(this.props.finishInfo.finishpage.graph, 250, 450)}}></div>
      </div> : ""
    }
    {
    this.props.userData.score && this.props.finishInfo.finishpage && this.props.finishInfo.finishpage.feedback ?
    <div className='finish-results-feedback'>
      {this._getConditionalText(this.props.finishInfo.finishpage.feedback, this.props.userData.score)}
    </div> : ""
    }
    <div className="finish-content" dangerouslySetInnerHTML={{__html: this.props.finishInfo.startpage.content}}></div>
    <div className="finish-button">
      <span onClick={this.props.onClick} className="btn finish">REPLAY</span>
    </div>
  </div>
);
},

这是正在发生的事情：所有逻辑似乎都工作正常，但它在 HTML 中创建附加跨度，并且这些跨度占用了页面上的空间，即使它们没有数据。

有什么想法吗？如果有帮助的话，我可以包含页面的 HTML 输出。

回答您的问题：React 出于各种原因在 DOM 中插入跨度，包括包装浮动文本节点（请参阅此答案）、空格（请参阅此答案）以及（我认为）为从 render 方法返回null的组件设置占位符等。如果这给您带来了问题，可能是因为您使用的是对所有span元素或组件范围内的所有span元素进行操作的 CSS。放弃CSS，或者让它特定于它需要样式的元素，你应该没问题。

在我看来，React 在这里的方法符合 span 元素的意图，如果不与特定类相关联，它应该是一个布局无操作。

相关文章：