react 组件样式 & ref标记

明确需求

组件就是一个个页面，里面放html代码

思考：组件样式写在哪？

回答：通过link导入或者写style

<link rel="stylesheet" href="路径及文件名.css">
<标签名 style={ {css属性名:属性值，....，css属性名n:属性值n} }></标签名>

留心：在react中通过className增加样式（原因：JS语法   标签对象.className = "类名"）

ref标记

语法

<标签 ref="标识"></标签名>

this.refs.标识  =>  该语法可以获取JS元素对象

vue中实 用 this.$refs.标识

练习

• 需 求：添加input框默认获取焦点

• 步骤1：给添加input框设置ref

• 步骤2：页面渲染完毕，获取js元素对象，设置默认选中（componentDidMount）

// 构造函数 -> DOM已经被渲染
    componentDidMount()
    {
        // console.log(this.refs)   
        // console.log(this.refs.inputObj)  标签对象

        this.refs.inputObj.focus()       // 获取焦点
    }
    <input ref="inputObj" type="text" >

小总结

ref好处：减少DOM查找，提升性能

ref语法：1-给标签增加ref属性，2-通过this.refs.标识获取

切记需要DOM数据已经渲染：componentDidMount （单词分析：组件已经挂载）