React引用子组件、定义参数和方法

最新推荐文章于 2024-05-16 01:50:52 发布

chijiajing

最新推荐文章于 2024-05-16 01:50:52 发布

阅读量1.9k

点赞数

分类专栏：学习

本文链接：https://blog.csdn.net/chijiajing/article/details/83095230

版权

学习专栏收录该内容

96 篇文章 0 订阅

订阅专栏

导入插件
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=Footer

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

chijiajing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React引用子组件、定义参数和方法

导入插件gulp-webpackjsx-loaderreact-domreactgulp-concatbrowser-syncgulp完成数据结构创建gulpfile.jsvar concat=require("gulp-concat");var webpack=require("gulp-webpack");var react=require("react");v...
复制链接

扫一扫