style用法、封装数组遍历、改变数据再次生成真实dom、函数式组件与类组件、对象的处理

大熊睡不醒

于 2020-10-02 21:56:04 发布

阅读量1.8k

点赞数

文章标签： react

本文链接：https://blog.csdn.net/Panda_xv/article/details/108905102

版权

本文介绍了React中的style使用，如何封装数组遍历，数据变化后重新渲染DOM的策略，以及函数式组件和类组件接收参数的方式，同时也探讨了对象处理的方法。

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

React的style用法

给jsx代码中添加样式，需要将class（保留字） ==> className形式！
给jsx代码中添加内联样式，style={ {} }

<head/>
    <style>
        .red{
    
            color:red
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        let arr = [10, 20, 30, 40, 50]
        let arrIndex = 0
        function show(arr){
    
            return arr.map((item,index)=>{
    
                return <p 
                    key={
    index} 
                    className={
     arrIndex === index ? "red" : ""}
                    onClick={
     ()=>{
    arrIndex = index; render()} }
                >{
    item}</p>
            })   
        }
        
        render()
        function render(){
    
            const a = 
            <div>
                {
    
                    show(arr)
                }    
            </div>
            ReactDOM.render(a,document.querySelector("#app"))
        }

最低0.47元/天解锁文章

大熊睡不醒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
style用法、封装数组遍历、改变数据再次生成真实dom、函数式组件与类组件、对象的处理

React的style用法给jsx代码中添加样式，需要将class（保留字） ==> className形式！给jsx代码中添加内联样式，style={ {} }<head/> <style> .red{ color:red } </style></head><body> <div id="app"></div> <
复制链接

扫一扫