JavaScript – JSX不会产生预期输出,SPAN嵌套在A中

我刚刚开始使用React,并尝试使用React Components重新创建现有的 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"))),"Tab2 ","9"))),"Tab3 ","5"))),"Tab4 ","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清楚地显示了作为锚点的孩子的跨度,所以我认为这可能是一个错误,但是想确保我没有做错事.

解决方法

是的,这是React的限制.为了使其进行实时更新,它需要通过将每个文本节点包装在一个跨度中来为每个文本节点提供一个ID.

我希望将来能够摆脱这个问题.