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 はスパンをアンカーの子として明確に示しているので、おそらくバグだと思いますが、何か間違ったことをしていないことを確認したかったのです。