react的基本文件组成格式(与vue做类比)

最新推荐文章于 2024-01-04 23:16:05 发布

ZH_TX

最新推荐文章于 2024-01-04 23:16:05 发布

阅读量420

点赞数

分类专栏： React JavaScript

本文链接：https://blog.csdn.net/ZHXT__/article/details/106773635

版权

JavaScript 同时被 2 个专栏收录

71 篇文章 0 订阅

订阅专栏

React

8 篇文章 0 订阅

订阅专栏

在react中就相当于在js, 所以不存在什么属性需要绑定, 如果定义了变量, 可以直接使用
变量用{ }, 与html达到想结合的目的

大致模板:

import React, { Component } from 'react'


export default class Learn extends Component {
    // constructor(props){
    //     super(props)
    //     this.state={
    //         //类似于vue中data(){}, props,必须有上面的super函数
    //     }
    //     this.handleClick=()=>{

    //     }
    // }


    //上面的写法也可以直接在这里写,更加的简便
    state={

    }

    // (自定义事件)函数直接写层箭头函数, 不用再bind(this)
    handleClick=()=>{
        //更新状态
        
        this.setState({

        })
    }

    //生命周期
    componentDidMount(){

    }

    //静态属性的要求,传参
    // static propsType={
    //     name:propsType.string.isRequire
    // }

    
    //html视图
    render() {

        return (
            <div>
                <div className="newclass" onClick={this.handleClick}></div>
				//vue中使用v-for达到相应要求
                {
                    Xx.map((item,index)=>{<xxzj组件 /> ;index={index}} )
                }
            </div>
        )
    }
}