04react中樣式的使用 內聯和外部樣式表

2021-10-02 04:23:34 字數 1135 閱讀 4389

1:在src中新建了三個子元件分別為header content  footer

2:在裡面分別寫入** 建議用rcc快捷方式

header.js中

import react,  from 'react'

var headerstyle =

export default class header extends component

}

content.js中

import react,  from 'react'

export default class content extends component

}

在footer.js中寫入

import react,  from 'react'

import "./footer.css";

export default class footer extends component

}

3:在同級寫乙個css footer.css

.footer
4:在index中使用我們的三個子元件

import  react, from "react";

import reactdom from "react-dom";

import header from "./header";

import content from "./content";

import footer from "./footer";

render()

}

5:style注意事項

6:css的注意事項

寫完執行  就可以看到頭部是紅色字型  底部是綠色字型

04 react中jsx語法展示資料

1 獲取根節點 var root document.getelementbyid root 資料 var name 妲己 2 建立虛擬dom 資料繫結使用單花括號 var obj 在花括號使用字串遵循js語法 var obj img標籤 所有的單標籤必須有關閉標籤 var obj 動態classna...

react中樣式的使用(內聯和外部樣式表)

1 在src中新建三個子元件分別為 header footer content 2 在裡面分別寫入 建議用rcc快捷方式 header.js中 如下 import react,from react var headerstyle export default class header extends...

04 React 建立乙個自動跟新時間的元件

componentdidmount宣告週期函式 表示元件渲染完成後componentwillunmount宣告週期函式 元件將要解除安裝 通常用於 為了防止記憶體洩漏 清除定時器 11 建立元件 clock.js 元件名大寫 12 報錯 attempted import error clock is...