React组件-组件编写

编写组件

页面结构

组件

注意：

• 组件必须继承React.Component
• 组件必须有constructor（）且super父级，否则状态等功能无法使用
• 组件必须有render（）方法
• 组件名（类名）必须首字母大写
• 组件使用时，单双标签都可以
• 组件中的HTML必须规范（双标签闭合，单标签结尾加/）

模板输出

输出变量，属性，方法...任何东西都可以

class Cmp1 extends React.Component{ 
    constructor(...args){
        super(...args);
        this.age=18
    }
    fn(){
        return 55
    }
    render (){
        let name='张三';
        return 

            //输出变量
            姓名：{name}

            //输出属性
            年龄：{this.age}

            {this.fn()}
        
    }}复制代码

输出到属性

class Cmp1 extends React.Component{
    contructor(...args){
        super(...args);
    }
    render(){
        let a=12;
        return 

            
            
"a">box1

            
            
box2
        
;
    }
}
复制代码

组件传参

用props接受参数

class Cmp1 extends.Component{
    constructor(...args){
        super(..args)
    }
    render(){
        return{
            

                {this.props.a},{typeof(this.props.a)}
            
        };
    }
}
//方法1.字符串
//"12"/>
//12,string

//方法2.其他类型（数组，数字，json等）
//'blue'}}/>
//{name:blue,object}

复制代码

注意：如果希望给组件传递参数（数字，json等），必须使用{},否则传递的都是字符串

html组件的style

render(){
    return{
        //错误
        
"width:200px;height:200px">
        //正确
        
'200px',height:'200px'}}>
    }
}
复制代码

注意：react中不存在{{}}写法，外面一层{}是react的表达式，里面一层{}是json的一部分

html组件的class

render(){
    return{
        

            组件类名
        
    }
}复制代码

转载于:https://juejin.im/post/5cea805ff265da1b614fd472