react-13-JSX-for循环-选项卡
2021-07-25 本文已影响0人
云高风轻
1.前言
算是个小练习吧
比较这种tab页,选项卡还是非常常用的
2. 效果
1.gif
3.分析
- 上边切换按钮 循环写出,配合选中态
- 下边对应的内容也可以循环写出,
- 需要给每个按钮和 显示内容做个标记
- 点击的时候 修改
state的 值
4. 具体的实现 -for
4.1 for-问题
1.png
这个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)
希望想入门的可以自己多练练试试
已经入门了,就没必要在这里浪费时间了
