JSX 没有产生预期的输出，SPAN 嵌套在 A 中答案

【问题标题】：JSX not producing expected output with SPAN nested in AJSX 没有产生预期的输出，SPAN 嵌套在 A 中
【发布时间】：2014-02-13 18:44:42
【问题描述】：

我刚刚开始使用 React，并且正在尝试使用 React 组件重新创建现有的 HTML 输出。

我不确定这是一个错误，还是我做错了什么，但最终的 HTML 输出不是我所期望的。

问题是标签锚文本不应该被包裹在一个跨度中，只能是下面的数字。

从这个 JSX 开始：

/** @jsx React.DOM */;
var MyComponent = React.createClass({
  render: function() {
    return (
      <div>
        <div>
          <ul>
            <li><a>Tab1 <span>3</span></a></li>
            <li><a>Tab2 <span>9</span></a></li>
            <li><a>Tab3 <span>5</span></a></li>
            <li><a>Tab4 <span>6</span></a></li>
          </ul>
        </div>
      </div>
    );
  }
});
React.renderComponent(MyComponent({}), document.body);

编译成如下JS：

/** @jsx React.DOM */;
var MyComponent = React.createClass({displayName: 'MyComponent',
  render: function() {  
    return (
      React.DOM.div(null, 
        React.DOM.div(null, 
          React.DOM.ul(null, 
            React.DOM.li(null, React.DOM.a(null, "Tab1 ", React.DOM.span(null, "3"))),
            React.DOM.li(null, React.DOM.a(null, "Tab2 ", React.DOM.span(null, "9"))),
            React.DOM.li(null, React.DOM.a(null, "Tab3 ", React.DOM.span(null, "5"))),
            React.DOM.li(null, React.DOM.a(null, "Tab4 ", React.DOM.span(null, "6")))
          )
        )
      )
    );
  }
});
React.renderComponent(MyComponent({}), document.body);

然后呈现为以下 HTML：

<div data-reactid=".r[1ajsn]">
  <div data-reactid=".r[1ajsn].[0]">
    <ul data-reactid=".r[1ajsn].[0].[0]">
      <li data-reactid=".r[1ajsn].[0].[0].[0]">
        <a data-reactid=".r[1ajsn].[0].[0].[0].[0]">
          <span data-reactid=".r[1ajsn].[0].[0].[0].[0].[0]">Tab1 </span>
          <span data-reactid=".r[1ajsn].[0].[0].[0].[0].[1]">3</span>
        </a>
      </li>
      <li data-reactid=".r[1ajsn].[0].[0].[1]">
        <a data-reactid=".r[1ajsn].[0].[0].[1].[0]">
          <span data-reactid=".r[1ajsn].[0].[0].[1].[0].[0]">Tab2 </span>
          <span data-reactid=".r[1ajsn].[0].[0].[1].[0].[1]">9</span>
        </a>
      </li>
      <li data-reactid=".r[1ajsn].[0].[0].[2]">
        <a data-reactid=".r[1ajsn].[0].[0].[2].[0]">
          <span data-reactid=".r[1ajsn].[0].[0].[2].[0].[0]">Tab3 </span>
          <span data-reactid=".r[1ajsn].[0].[0].[2].[0].[1]">5</span>
        </a>
      </li>
      <li data-reactid=".r[1ajsn].[0].[0].[3]">
        <a data-reactid=".r[1ajsn].[0].[0].[3].[0]">
          <span data-reactid=".r[1ajsn].[0].[0].[3].[0].[0]">Tab4 </span>
          <span data-reactid=".r[1ajsn].[0].[0].[3].[0].[1]">6</span>
        </a>
      </li>
    </ul>
  </div>
</div>

javascript 清楚地将跨度显示为锚的子级，所以我认为这可能是一个错误，但想确保我没有做错什么。

【问题讨论】：

标签： javascript reactjs react-jsx

【解决方案1】：

是的，这目前是 React 的一个限制；为了让它进行实时更新，它需要通过将每个文本节点包装在一个跨度中来为每个文本节点提供一个 ID。

我希望将来某个时候能解决这个问题。

【讨论】：

啊，很高兴知道。谢谢！我可以通过调整 CSS 来解决它。

【解决方案2】：

您始终可以使用 className 来标识特定元素。似乎这些数字是某种徽章，所以每个跨度都可以有 className="badge"

【讨论】：