个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试使用 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”，但我不知道该怎么做。
有人可以帮忙吗？
最佳答案
您说过要选择第一个选项卡并为其分配一个类名。我认为它的解决方案相当简单并且与此类似(我没有测试它):
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 组件。您可以从以下示例开始:
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/
25
4
0
在我的 JSP/HTML 中我有这个: 然后在我的 javascript 部分，我有一个像这样从 onclick 调用的函数； function changeLabel(){ exampl
我只是 DOM 操作的初学者，很抱歉提出一个愚蠢的问题。我有以下 HTML 和 JS 代码 Coffee Tea Click the button to get the HTML
我看到这两个属性的描述是只读的。那么这意味着什么，因为我做了一个使用 firstChild 像 的小测试 $('#one').firstChild.textContent = "ssss"。 最佳答案
我一直在努力寻找一个功能完全相同的 jQuery 替代品: document.getElementById("element").firstChild.nodeValue = value; 以下是相关
我需要为现有元素创建一个新的子元素。问题add onclick event to newly added element in javascript对我帮助很大。 我就是不能把它定义为第一个 chil
我有这样的标记: Hello 但是当我尝试选择 #table 的 firstChild 时，它返回空白(正如预期的那样)。 var ss = document.ge
Javascript 的 super 新手，我在任何地方都找不到任何解决方案。我不确定问题出在 firstChild 还是 .pause() “tabcontent[i].firstChild.pau
我无法理解为什么我无法正确访问 JavaScript 类中元素对象的 firstChild。我可以在没有 firstChild 的情况下正确设置 innerHTML，但我想在 firstChild 上
function setText() { // doesn't change... why not!? document.getElementById("demo").firstChild.i
我目前正在用不同的颜色为菜单的第一个元素着色(通过 :firstchild pseudo)。但是，第一个元素有时会被隐藏(通过 display:none)，我希望对事件的第一个元素进行着色。 我原以为
while (div.hasChildNodes()) { fragment.appendChild(div.firstChild) } while (div.firstChild) {
前几天我在写一些代码，出于某种原因，我不知道为什么会这样，但这是我写的代码的一部分。 var item = document.getElementByClass('object');
我正在尝试使用 MSXML2 类登录网站并将价格下载到我的电子表格中。我有一个代码用于搜索产品的产品编号列表，然后它应该从 html 中提取价格元素。 我的问题是我不断收到“对象变量或未设置 bloc
我正在学习DOM，但无法理解:firstChild和firstElementChild有什么区别？ 最佳答案 此属性与firstChild之间的区别在于，firstChild返回第一个子节点作为元素节
我的代码几乎可以解释我将要得到的内容: ► 00:00/02:25 var myPlayer=document.getElementById('play
JQuery 中是否有 firstChild.data 的等价物？ 给定以下 HTML: Helloworld/ 下面的 javascipt 将返回:“你好” document.getElementB
我已经看到很多关于使用 jQuery 选择第一个子元素的最快方法的讨论。正如所料， native DOM firstChild 属性比使用 jQuery 选择器或选择器组合要快得多 - 请参阅 htt
有时，使用React库时，例如react-router ，我收到此错误: Uncaught TypeError: Cannot read property 'firstChild' of undefi
我想知道，为什么在这种情况下“firstChild”和“lastChild”不起作用，但是当我通过数组中 li 的位置执行此操作时，一切正常。 这是我的 HTML: Ite
我已经在浏览器(Opera、Chrome、FireFox)中测试过。firstChild 函数工作正常，但在 Edge 中它返回 EmptyTextNode。 document.getElementB
我是一名优秀的程序员,十分优秀！