前端项目实战200-react中写入for循环

最新推荐文章于 2023-08-16 16:46:54 发布

前端歌谣

最新推荐文章于 2023-08-16 16:46:54 发布

阅读量320

点赞数 1

文章标签：前端 react.js javascript

本文链接：https://blog.csdn.net/qq_41632427/article/details/127854398

版权

前端记录-work-react-最近工作专栏收录该内容

212 篇文章 3 订阅

订阅专栏

该博客展示了一个使用React实现的列表渲染示例，根据条件（i%2）为列表项设置红色或黑色背景。同时，存在一个页面控制逻辑，根据不同的pageControl值返回不同的组件，包括一个简单的li元素和div。此代码片段涉及到React的状态管理、条件渲染以及前端框架的基本用法。

摘要由CSDN通过智能技术生成

 return(
        <div>
            <ul>
                {(()=>{
                    let color;
                    let temp = [];
                    for(let i = 0; i < 10; i++){
                            (i % 2) === 0? color = 'red': color='black';
                            temp.push(<li key={i} style={{backgroundColor: color}}>{i}</li>)
                    
                        }
                        return temp;
                })()

                swtich(pageControl){
                    case 'a':
                        return <li>
                            fff
                        </li>
                        break;
                    case 'b':
                        return <div>ddd</div>
                        break;
                    case 'd':
                        return <Di/>
                    default: 
                        return null;
                }
            }
            </ul>
        </div>
    )