我正在尝试使用 Reach JSX 做一些对 JQuery 来说很简单的事情，但我无法在 JSX 中弄清楚。我已经尽可能地简化了这个例子，问题归结为:
我正在呈现多个选项卡标题，并且我希望第一个选项卡使用特定的类名呈现，以便我可以将其样式设置为看起来不同(默认选择的选项卡)。
我的 HTML 看起来像:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tabs</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.11.1/react.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.11.1/JSXTransformer.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx" src="tabs.js"></script>
<script type="text/jsx">
/**
* @jsx React.DOM
*/
React.renderComponent(<Tabs><Tab title="Tab1"></Tab><Tab title="Tab2"></Tab></Tabs>, document.getElementById('content'));
</script>
</body>
</html>
我的 JSX 看起来像:
/**
* @jsx React.DOM
*/
var Tab = React.createClass({
render: function() {
return (
<li className="tab">
{this.props.title}
</li>
);
}
});
var Tabs = React.createClass({
render: function() {
return (
<ul className="tabs">
{this.props.children}
</ul>
);
}
});
我想在第一个表上添加一个类名，例如“selected”或“active”，但我不知道该怎么做。
有人可以帮忙吗？
最佳答案
您说过要选择第一个选项卡并为其分配一个 className。我认为它的解决方案相当简单，与此类似(我没有测试过):
React.renderComponent(<Tabs><Tab isSelected = true title="Tab1"></Tab><Tab title="Tab2"></Tab></Tabs>, document.getElementById('content'));
var Tab = React.createClass({
render: function() {
return (
<li className={"tab " + (this.props.isSelected ? "selected" :"") }>
{this.props.title}
</li>
);
} });
但是看看你的用例，即你正在尝试实现一个 tabs 元素，我认为你应该实现一个
Tabs 组件，它可以管理所选选项卡的当前状态。这是您可以开始的示例:http://jsfiddle.net/kb3gN/7180/
var TabHeader = React.createClass({
render: function() {
return (
<li className={"tabHeader " + this.props.className}
onClick={this.props.onClick}>
{this.props.header}
</li>
);
}
});
var TabContent = React.createClass({
render: function() {
return (
<div className={"tabContent " + this.props.className}>
{this.props.content}
</div>
);
}
});
var Tabs = React.createClass({
getInitialState: function(){
return {
selectedTabNo : this.props.initialSelected ? this.props.initialSelected : 0
}
},
getHeaderClass : function(i){
return this.state.selectedTabNo == i ? "selected" : "";
},
getContentClass : function(i){
return this.state.selectedTabNo == i ? "selected" : "hidden";
},
handleClick: function(i,e){
this.setState({selectedTabNo:i});
e.preventDefault();
},
render: function() {
var headers = [];
var i = 0;
this.props.tabs.forEach(function(tab){
headers.push(<TabHeader header={ tab.header }
key={"tab"+i}
onClick = {this.handleClick.bind(this,i)}
className = {this.getHeaderClass(i)} />);
i++;
}.bind(this));
var contents = [];
i=0;
this.props.tabs.forEach(function(tab){
contents.push(<TabContent content={ tab.content }
key={"content"+i}
className = {this.getContentClass(i)} />);
i++;
}.bind(this));
return (
<div className="tabsContainer">
<ul className="tabHeadings">
{headers}
</ul>
{contents}
</div>
);
}
});
var App = React.createClass({
render: function() {
return( <Tabs initialSelected={2}
tabs={[{header:"step1", content:<div>This is page 1</div>},
{header:"step2", content:<div>This is page 2</div>},
{header:"step3", content:<div>This is page 3</div>} ]} /> );
}
});
React.render(<App />, document.body);
关于reactjs - react JSX 和 FirstSibling 或 FirstChild，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26683115/