React引用子元件、定義引數和方法
阿新 • • 發佈：2018-11-03
匯入外掛
gulp-webpack
jsx-loader
react-dom
react
gulp-concat
browser-sync
gulp
完成資料結構
建立gulpfile.js
var concat=require("gulp-concat"); var webpack=require("gulp-webpack"); var react=require("react"); var gulp=require("gulp"); var browserSync=require("browser-sync"); var reactDom=require("react-dom"); var loader=require("jsx-loader"); //webpack配置 var webpackConfig = { output:{ filename: 'index.js' }, devtool: 'inline-source-map', module:{ loaders:[ {test: /\.jsx$/, loader: 'jsx-loader'} ] }, resolve:{ extensions:['','.js','.jsx'] } } gulp.task("default",["compresJSX"],function(){ browserSync.init({ server:{ baseDir:"./" } }) gulp.watch("jsx/**/*.jsx",["compresJSX"]) }) gulp.task("compresJSX",function(){ gulp.src("./jsx/**/*.jsx") .pipe(webpack(webpackConfig)) .pipe(gulp.dest("./script/js")) .pipe(browserSync.stream()) })
子元件
Footer.jsx
var React=require("react");
class Footer extends React.Component{
render(){
return (<div>這是底部</div>)
}
}
module.exports=FooterHeader.jsx
var React=require("react"); var ReactDom=require("react-dom"); class Header extends React.Component{ render(){ return (<div>這是頭部</div>) } } module.exports=Header;
父元件index.jsx
var React=require("react"); var ReactDom=require("react-dom"); //匯入子元件 var Header=require("./Header.jsx"); var Footer=require("./footer.jsx"); //例子：定義引數以及方法呼叫 class Main extends React.Component{ //定義引數得放在constructor裡 constructor(){ //定義引數 super(); this.state={timer:0} } //自定方法每次加1 tick(){ console.log(this); this.setState({ timer:(this.state.timer+1) }) } //點選方法 trach(){ console.log("執行點選方法了") } //類似Vue裡的created鉤子函式 componentDidMount(){ //若不用箭頭函式包裹起方法(this.tick())那麼tick裡面的this就是一個window物件.會報錯 //包裹起來後的this就是main,這樣的this才能指向timer setInterval(()=>{this.tick()},1000) } render(){ return ( <div> <Header/> <p>{this.state.timer} <span><button onClick={this.trach.bind(this)}>點選事件</button></span> </p> <Footer/> </div> ) } } ReactDom.render(<Main/>,document.getElementById("box"));
首頁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
</div>
<script src="script/js/index.js"></script>
</body>
</html>