JSX не производит ожидаемый выход с SPAN, вложенным в A

Question

Я только начинаю играть с React и пытаюсь воссоздать существующий выход HTML с помощью React Components.

Я не уверен, что это ошибка, или я делаю что-то не так, но конечный вывод 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 ясно показывает как ребенок привязки, поэтому я думаю, что это, вероятно, ошибка, но я хотел убедиться, что я не делая что-то неправильно.

Answer 1

Да, это в настоящее время ограничение в Реагировании; для того, чтобы он мог выполнять живые обновления, ему нужно дать каждому текстовому узлу идентификатор, обернув его в промежутке.

Я надеюсь избавиться от этой проблемы когда-нибудь в будущем.

Answer 2

Вы всегда можете использовать className для идентификации определенных элементов. Кажется, что цифры являются значками какого-то типа, поэтому каждый пролет может иметь классName = «значок»