React元件引用

2021-08-29 02:46:29 字數 1458 閱讀 4053

需要安裝一些外掛程式

gulp-webpack

jsx-loader

react-dom

react

gulp-concat

browser-sync

gulp

gulpfile.js

var webpack=require("gulp-webpack");


var loader=require("jsx-loader");


var dom=require("react-dom");


var react=require("react");


var concat=require("gulp-concat");


var browser=require("browser-sync");


var gulp=require("gulp");


//webpack配置


var webpackconfig = ,


devtool: 'inline-source-map',


module:]},


resolve:


}//主程式預設方法


gulp.task("default",["script"],function()


})})


//合併js以及解析jsx檔案


gulp.task("script",function())
首頁面(index.html)



解析後的js檔案必須在底部引用
子元件(header.jsx)

//引入react


var react=require("react");


//引入react-dom


var reactdom=require("react-dom");


//2018版的寫法,繼承react.component


class header extends react.component


}//允許被引用，名字是類名


module.exports=header;
父元件(index.jsx)

//還是引用react和react-dom


var react=require("react");


var reactdom=require("react-dom");


//匯入被引用的子元件


var header=require("./commponent/header.jsx");


function welcome()


//規定格式寫法


reactdom.render(


//內容標籤,與父元件的function名一致


,	document.getelementbyid("box")


)
然後直接執行gulp即可看到對應效果了

react元件引用less樣式失效問題記錄

在react專案中使用了less來預處理css,但是在專案中卻遇到了引用樣式不生效的問題，現記錄如下 頁面 import react,from react import from react redux import index.less class priceprotection extends ...

react父子元件傳值 react元件通訊

react元件之間的通訊，其實就是通過乙個props建立彼此之間的橋梁，而我們最常用的就是父子傳值，子父傳值，以及兄弟之間傳值 1 父元件給子元件傳值 父元件給子元件傳值相對比較簡單，如果想讓他們倆之間有所聯絡，想傳遞父元件的資料，那麼我們就在父級元件中的子元件標籤上定義乙個屬性，而屬性的值就是我們...

React高階元件

想想以前用原生和jquery的專案，上千行的code映入眼簾，瞬間有種昏死過去的衝動。難以維護，改乙個bug可能出現n個bug，真的是很痛苦。於是乎元件化成為了當前前端開發的主流技術。angular vue和react很好的幫我們實現了元件化。但是我們常常也會遇到一種情況，就是兩個元件往往有很多的重...