点击刷新
如何封装一个react组件
1、对于react script，官方建议我们用JSX（javascript xml）语法糖，需要引入额外的解析文件去解析。
2、render方法：用于给dom元素插入渲染类dom的元素使用语法：ReactDOM.render();
参数1：类dom元素，参数2：DOM对象
3、创建组件：createClass方法
语法：React.createClass();赋予一个变量名作为组件名
参数：一个render对象，可以使用一个函数的返回值去渲染组件
4、给自定义组件添加属性使用 this.props.attribute（自定的）
5、设置样式，不能直接在类dom元素中直接使用class，因为类dom不是真的dom，设置插入样式使用className属性，里面放一个驼峰形式声明的样式对象，也可以使用内联样式，同样放的是一个样式对象
6、对于类Dom元素的渲染，还可以使用数组的方式去定义多个
7、类dom元素的渲染，需要使用一个块级元素（诸如div,section之类的）去包裹，或者数组
8、在类dom元素中，可以使用{}，插入表达式。
以下是demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React test</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="demo"></div>
<div id="express"></div>
<script type="text/babel">
var Componement = React.createClass({
render:function(){
return(
<div>
<Name name = {this.props.name} />
<Content content={this.props.content} />
</div>
);
}
});
var Name = React.createClass({
render:function(){
return(
<h1>{this.props.name}</h1>
);
}
});
var Content = React.createClass({
render:function(){
return(
<a href= >
{this.props.content}
</a >
);
}
});
ReactDOM.render(
<Componement name = 'myComponement' content='http://www.baidu.com'/>,
document.getElementById('demo')
);
var domArray = [<h1>{1+1}</h1>,<p>{2+2}</p >];
ReactDOM.render(
<section>{domArray}</section>,
document.getElementById('express')
);
</script>
</body>
</html>© 著作权归作者所有
举报
发表评论
0/200
