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