reactjs 选项卡初学

最新推荐文章于 2024-03-23 09:44:13 发布

luck5154

最新推荐文章于 2024-03-23 09:44:13 发布

阅读量2.4k

点赞数

分类专栏： react 文章标签： react js

本文链接：https://blog.csdn.net/luck5154/article/details/54313409

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

每次学习一个语言我都喜欢写下选项卡

html 页面很简单除了引入的那些必要的库之外只有这一个

<div id="text"></div>

CSS 我只做了一个背景样式的改变

<style type="text/css">
		.on{
			background: #ccc
		}
</style>

JS 我引用的直接贴我JS 文件里边的代码

var Taba=React.createClass({
	getInitialState:function(){
		return{arr:[
			{"name":"tab1",
			"con":"第一个"},
			{"name":"tab2",
			"con":"第二个"},
			],
			key:0,
		
		}
	},
	handleClick(key,event){
		  this.setState({key:key});
		
		  
		
	},
	render(){
		var arrs =this.state.arr;
		var n =this.state.key
		var con=arrs[n].con
		return(
			<div>
			{
				arrs.map((arr,i)=>{
					return(							
						<span className={n==i?'on':""} key={i} onClick={this.handleClick.bind(this,i)}>{arr.name }</span>		
						)
				})
			}
			<div>{con}</div>
			</div>
			
			)
	} 
})
ReactDOM.render(
	<Taba/>,
	document.getElementById("text")
	)

遇到的问题吧都是一些小问题

1 在return里边写逻辑要加{}

2 在做MAP 循环的时候要再循环的DIV 上加 key{i} 要不然会报错 react.js:19287 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Taba`. See https://fb.me/react-warning-keys for more information.
3 在写class 样式的时候那个判断我出了点问题。

思路

其实很简单就是鼠标单击的时候传入key 值然后根据key 值去判断con 的内容是什么也是由key 去判断需不需要添加样式