1.前言

算是个小练习吧
比较这种tab页,选项卡还是非常常用的

---

2. 效果

1.gif

---

3.分析

1. 上边切换按钮 循环写出,配合选中态
2. 下边对应的内容也可以循环写出,
3. 需要给每个按钮和 显示内容做个标记
4. 点击的时候 修改 state的 值

---

4. 具体的实现 -for

4.1 for-问题

1.png
这个 render要求写一个表达式,但是 这种for语句不行

---

4.2 for-问题-解决

封装一个 函数
这个 参数 f是循环函数,我这里作为个一个参数,哪里需要就可以在哪里具体实现 循环逻辑

 function listFor(f) {
            var list = [];
            f(list)
            return list
        }

---

5. 切换按钮- 循环函数的使用

1. 可能看上边封装的循环函还比较晕乎 ,结合这里的应用会清楚一点

2. 这个选中态 是通过 className + 三目元算符来实现的

因为写的是js代码 而这个class关键字已经作为类来使用了,所以样式类名这里 必须通过className来写

3. 点击事件通过 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. 显示内容-循环函数

1. 这就体现出封装循环函数的时候,把这个循环逻辑封装成函数的好处了
2. 这里其实可以通过浏览器的 react插件来修改 num的值进行调试
3. 注意是 循环的key不要忘记
4. 通过 常规的 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)

希望想入门的可以自己多练练试试
已经入门了,就没必要在这里浪费时间了

---

参考资料

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉