React組件的樣式

時間 2019-11-07

標籤 react 組件樣式欄目 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>

**

設置組件樣式，講解三種：
一、內聯樣式
二、對象樣式、
三、選擇器樣式html

注意：在React和HTML5中設置樣式時的書寫格式是有區別的react

一、HTML5以;結尾**
   React以,結尾
二、HTML5中key、value都不加引號**
   React中屬於Javascript對象，key的名字不能出現"-",須要使用駝峯命名法。
   若是value爲字符串，須要加引號。
三、HTML5中，value若是是數字，須要帶單位**
   React中不須要帶單位

咱們定義一個組件類，同時使用三種設置組件樣式的方式ajax

需求：定義一個組件，分爲上下兩行顯示內容

<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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。