React组件的样式

发布时间:2019-07-02 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了React组件的样式脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
<!DOCTYPE htML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React样式测试</title>
<!-- react.js 是React的核心库 -->
<script src="./build/react.js charset="utf-8"></script>
<!-- react-dom.js是作用是提供与DOM相关的功能 -->
<script src="./build/react-dom.js" charset="utf-8"></script>
<!-- browser.min.js 的作用是将JSCX语法转换成Javascript的语法 -->
<script src="./build/browser.min.js" charset="utf-8"></script>
<!-- 还可以直接通过网址引入browser.min.js文件 -->
<!-- 比如:<script src="https://cdnjs.clouDFlare.COM/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->

<style>
    .pStyle {
        font-size:30px;
    }
    .color{
        color:#f00;
        background:#f00;
        font-size:50px;
    }
</style>

</head>
<body>
    <!-- React渲染的模板内容会插入到这个DOM节点中,作为一个容器 -->
    <div id="container">
         
    </div>

**<!-- 在React开发中,使用JSX,跟Javascript不兼容,在使用JSX的地方,要设置type:text/babel -->
<!-- babel是一个转换编译器,把ES6转成可以在浏览器中运行的代码 -->
设置组件样式,讲解三种:
1、内联样式
2、对象样式、
3、选择器样式

注意:在React和HTML5中设置样式时的书写格式是有区别

1、HTML5以;结尾**
   React以,结尾
2、HTML5中key、value都不加引号**
   React中属于Javascript对象,key的名字不能出现"-",需要使用驼峰命名法。
   如果value为字符串,需要加引号。
3、HTML5中,value如果是数字,需要带单位**
   React中不需要带单位
 

我们定义一个组件类,同时使用三种设置组件样式的方式

需求:定义一个组件,分为上下两行显示内容

<div> 内联样式:设置背景颜色、边框大小、边框颜色
    <h1></h1>   对象样式:设置背景颜色、字体颜色
    <p></p>     选择器样式:设置字体大小
    <span></span> 动态添加样式(动态添加选择器样式)
</div>

注意:在React中使用选择器设置组件样式时,属性名不能使用class,需要使用classname替换

(因为class在React中是一个关键字)
类似的:使用htmlFor替换for
**如果需要动态添加样式可以在setstate里面修改**


  <script type="text/babel">   
        var hStyle = {
            backgroundColor: "green",
            color: "red"
        }
        var ShowMessage = React.createClass({
            getInitialState:function(){
                return {color:""}
            },
            mouseover:function(){
                this.setState({addClass:"color"})
            },
            render: function() {
                return (
                    // 注意;这里的backgroundColor,中间不能加“-”
                    <div style={{backgroundColor:"#ccc", borderWidth:5, borderColor:"brack", broderStyle:"solid"}}>
                        <p className="pStyle">{this.props.title}</p>
                        <h1 style={hStyle}>{this.props.name}</h1>        
                        <span className={this.state.addClass} onMouseOver={this.mouseover}>测试鼠标滑过效果</span>
                    </div>
                );
            }
        });
        ReactDOM.render(
                <ShowMessage name="鹏鹏" title="名字" />,
                document.getElementById("container")
        );
     
    </script>
     
</body>
</html>

脚本宝典总结

以上是脚本宝典为你收集整理的React组件的样式全部内容,希望文章能够帮你解决React组件的样式所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。