1.前言
算是个小练习吧
比较这种
tab页,选项卡还是非常常用的
2. 效果
![Y`{]CD%S~Y`NBT8WX93H1C9.png](https://ucc.alicdn.com/pic/developer-ecology/8c9068ae81c545998ddddd221b8407db.png?x-oss-process=image/resize,w_1400/format,webp "Y`{]CD%S~Y`NBT8WX93H1C9.png")
3.分析
- 上边切换按钮 循环写出,配合选中态
- 下边对应的内容也可以循环写出,
- 需要给每个按钮和 显示内容做个标记
- 点击的时候 修改
state的 值
4. 具体的实现 -for
4.1 for-问题
这个
render要求写一个表达式,但是 这种for语句不行
4.2 for-问题-解决
封装一个 函数
这个 参数
f是循环函数,我这里作为个一个参数,哪里需要就可以在哪里具体实现 循环逻辑
function listFor(f) { var list = []; f(list) return list }
5. 切换按钮- 循环函数的使用
- 可能看上边封装的循环函还比较晕乎 ,结合这里的应用会清楚一点
- 这个选中态 是通过
className+三目元算符来实现的因为写的是
js代码 而这个class关键字已经作为类来使用了,所以样式类名这里 必须通过className来写
- 点击事件通过
setState修改state的值
listFor((list) => { for (let i = 0; i < 10; i++) { list.push(<button className={this.state.num ==i ? "selected":""} onClick={()=>{this.setState({num:i})}} key={i}>{i} </button>) } })
6. 显示内容-循环函数
- 这就体现出封装循环函数的时候,把这个循环逻辑封装成函数的好处了
- 这里其实可以通过浏览器的
react插件来修改num的值进行调试- 注意是 循环的
key不要忘记- 通过 常规的
display来控制内容显隐
listFor((list) => { for (var i = 0; i < 10; i++) { // 控制台调试 num的值 测试 list.push(<h1 key={i} style={{display:this.state.num ==i ? 'block' :"none"}}>{i} </h1>) } })
7.完整代码
7.1 选中样式
<style> .selected{ color:red; } </style>
7.2 JSX
function listFor(f) { var list = []; f(list) return list } class App extends React.Component { constructor(){ super(); this.state ={ num:0 } } render() { return (<div> { listFor((list) => { for (let i = 0; i < 10; i++) { list.push(<button className={this.state.num ==i ? "selected":""} onClick={()=>{this.setState({num:i})}} key={i}>{i} </button>) } }) } { listFor((list) => { for (var i = 0; i < 10; i++) { // 控制台调试 num的值 测试 list.push(<h1 key={i} style={{display:this.state.num ==i ? 'block' :"none"}}>{i} </h1>) } }) } </div>) } } ReactDOM.render(<App />, app)
希望想入门的可以自己多练练试试
已经入门了,就没必要在这里浪费时间了
