react中给jsx设置样式及非DOM操作属性介绍

责编:menVScode 2017-06-17 15:30 阅读(962)

一、JSX中使用样式

        组件的样式一般有三种情况:

        1、行内样式:写行内样式的时候需要使用两个{},即{{}},这种方式建议不要用;

        2、对象样式:在return前面定义一个样式对象,注意样式的写法,与HTML的不同点

        3、CSS样式(选择器样式)

        现在通过一个小例子将三种方式进行比较:

var Dome = React.createClass({
    render:function(){
        var style={
            color:'blue',
            fontSize:'24px'
        }
        return (
            <div className='box'>
                <h3 className='title' style={{color:'red',marginLeft:'100px'}}>默认标题</h3>   {/*行内样式*/} 
                <p className='subtitle' style={style}>说明</p>   {/*对象样式*/}
                <p className='detail'>这是个案例</p>   {/*css样式*/}
            </div>
        )
    }
});
ReactDOM.render(
    <Dome/>,document.getElementById('app')
)

        在html和React中样式书写也有区别:

                1、行内样式的时候,html中以分号(;)结束,在React中以逗号(,)隔开。

                2、在html中属性与值都不需要加上引号;在React中,属于javascript对象,key中不能存在 - ,需要使用驼峰命名,比如font-size需要写成fontSize。如果是value值,需要加上引号。

                3、在html中,设置带数字的值,宽度,高度等,需要带上单位;在React中数字可以不带单位,默认就是px;如果是em或者rem请带上单位。

二、非DOM操作属性

        非DOM属性:React中自定的属性

        1、dangerouslySetInnerHTML:在JSX中直接插入HTML代码,动态的添加HTML内容,由用户添加;需要使用属性,__html;dangerouslySetInnerHTML不安全,用的比较少,开发中可以用来调试,上线的产品最好不要用。

        2、ref:父组件引用子组件 this.refs.name。this.refs是个json格式的对象,可以通过this.refs访问dom。

        3、key:目的是提高渲染性能 ,涉及到React diff算法,React通过key值判断是否重新渲染。一般在用map或者forEach遍历的时候会用到。

var Demo = React.createClass({
    getInitialState:function(){
        return{
            content:'无内容!!!'
        }
    },
    doChange:function(e){
        this.setState({
            content:e.target.value
        })
    },
    render:function(){
        var text = {
            __html:'<span>我是在div中span标签</span>'
        }
        return (
            <div>
                <div dangerouslySetInnerHTML={text}></div>
                <input ref="userInput" onChange={this.doChange} type="text"/>
                <p ref="content">{this.state.content}</p>
            </div>
        )
    }
});
ReactDOM.render(
    <Demo/>,document.getElementById('app'),function(){
        console.log(this.refs)//{userInput: input, content: p}
    }
)

        这个例子实现的效果是你再input标签内输入数据的时候,下方的p标签也会显示所输入的内容,简单的数据的双向绑定。console.log(this.refs)的结果是{userInput: input, content: p}。

标签: react reactjs ref
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码