react组件-编写组件

组件声明

新建组件的命首页字母要为大写，否者在引用的时候会报错，react核心会认为是一个HTML标签，并无法解析
class声明的组件都是extends继承React.Component
关于传参的部分优化成传入一个...args,与官方的props没有任何的差别，只是为了便于以后的改子组件的继承之后的传参的变量。
所有的react必须要有constructor且super父级,否则将来无法使用state进行状态初始化,则无法正常的进行业务开发。
所有的组件都需要render来进行渲染，如果实际业务中真的不需要render，那么建议不要用继承React.Component。

class Cmp extends React.Component{
    constructor(...args){
        super(...args)
    }
    render(){
        return <div>aaa</div>
    }
}

组件调用

调用组件时使用ReactDOM.render，接受两个参数，第一为创建的组件，第二为需要挂载到的DOM元素。
组件的名称可以是单标签<Cmp/>，也可以是双标签<Cmp></Cmp>

let rootCont = document.getElementById('root');
ReactDOM.render(<Cmp/>,rootCont);
// ReactDOM.render(<Cmp></Cmp>,document.getElementById('root'));

模板输出

在render中直接声明的变量的话，直接使用{a}，希望输出什么就写入什么。
如果我现在需要输入对象中的属性，需要添加this,例如{this.b}。
如果需要对象中的方法的返回值，也同样需要this来进行调用方法。例如{this.c()}
在DOM元素中的属性中也是可以输出的，也必需使用{}，来进行输入，如果使用" ",传入的就是包裹的字符串。

class Cmp extends React.Component{
    constructor(...args){
        super(...args)
        this.b = 16
        this.url = "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
    }
    c(){
        return 17
    }
    render(){
        let a =12
        let d = 20
        return (
            <div>
                <span>a={a}</span>
                <span>b={this.b}</span>
                <span>c={this.c()}</span>
                <span title="d">d={d}</span>
                <span title={d}>d={d}</span>
                <img src={this.url} />
            </div>
        )
    }
}

javascript中的return的问题

return 的内容在编写时不能进行换行，否则的话会解析成没有任何返回，为保证代码的可读性，可以添加一个()进行优化。

组件传参

组件传参的使用在声明的组件中，添加属性名以及相对于的值
属性的传值可以是多个，看具体的业务需求。
在组件中使用的传值，直接用this.props就可以，传入了属性就是使用什么属性。
如果是使用双引号" "传值的话，传入的都为字符串，如果在业务业务代码中有使用+进行运算的话，其实就是字符串拼接如下图。如果需要传入特定声明的变量的话，需要使用{ }进行传值。
在react中的行间样式进行传值的时候，必须要写成json,在行间中直接进行写的时候就是在{},中包含json,并不是使用了两个{{ }}，styleJSON中的样式名为小驼峰命名的格式。

class Cmp extends React.Component{
    constructor(...args){
        super(...args)
        this.styleObj = {
            color:'red'
        }
    }
    render(){
        return (
            <div>
                <p> 姓名：{this.props.userName}，年龄: {this.props.age +1}</p>
                <p> 姓名：{this.props.userName}，年龄: {this.props.age2 +1}</p>
                <p style={
                    {color:'blue'}
                }>天气很好</p>
                <p style={this.styleObj}>天气很好2</p>
                <p style={this.styleObj}>天气很好3</p>
                <p style={this.props.styleObj}>天气很好4</p>
            </div>
        )
    }
}
//用一个组件
let rootCont = document.getElementById('root')
let styleObj2 = {
    color:'yellow'
}
ReactDOM.render(<Cmp userName="胡齐峰" age="18" age2={18}  styleObj = {styleObj2} ></Cmp>,rootCont)

html输出结果.png

最后编辑于：2020.11.03 14:09:36