Javascript JSX未生成嵌套在
我刚刚开始使用React,并尝试使用React组件重新创建现有的HTML输出 我不确定这是一个bug,还是我做错了什么,但最终的HTML输出不是我所期望的 问题在于,选项卡锚文本不应包装在跨度中,而应仅包装以下数字 从这个JSX开始:Javascript JSX未生成嵌套在,javascript,reactjs,react-jsx,Javascript,Reactjs,React Jsx,我刚刚开始使用React,并尝试使用React组件重新创建现有的HTML输出 我不确定这是一个bug,还是我做错了什么,但最终的HTML输出不是我所期望的 问题在于,选项卡锚文本不应包装在跨度中,而应仅包装以下数字 从这个JSX开始: /** @jsx React.DOM */; var MyComponent = React.createClass({ render: function() { return ( <div> <div&g
/** @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);
然后呈现为以下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清楚地将跨度显示为锚的子级,因此我认为这可能是一个bug,但我想确保我没有做错什么;为了进行实时更新,它需要通过将每个文本节点包装在一个范围中来为其提供一个ID
我希望在将来的某个时候解决这个问题。您总是可以使用className来标识特定的元素。这些数字似乎是某种类型的徽章,因此每个跨度都可以有className=“badge”啊,很高兴知道。谢谢我可以通过调整CSS来解决这个问题。
<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>