1. 介绍：
对组件的组织和管理方式
目的：
- 逻辑信息
- 代码模块化
- 封装细节
- 提高代码的复用性
实现：
- 组件嵌套(实现代码封装)
- Mixin（实现代码的复用）
2. 组件嵌套
组件嵌套本质是父子关系：
父组件通过属性向子组件通信， 子组件向父组件通信 ： 子组件调用父组件的的通信： 委托；
实例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
</head>
<body>
<script type="text/jsx">
//子组件
var GenderSelect = React.createClass({
render: function () {
return <select onChange={this.props.handleSelect}>
<option value="0">男</option>
<option value="1">女</option>
</select>
},});
// 父组件
var SingupForm = React.createClass({
getInitialState: function () {
return {
name:'',password:'',gender:'',}
},handerChange: function (name,event) {
var newState={}
newState[name] = event.target.value
this.setState(newState)
},handleSelect: function (event) {
this.setState({gender:event.target.value})
},render: function () {
console.log(this.state)
return <form>
<input type="text" placeholder="输入用户名：" onChange={
this.handerChange.bind(this,'name')} />
<input type="password" placeholder="输入密码" onChange={
this.handerChange.bind(this,'password')} />
<GenderSelect handleSelect={this.handleSelect}></GenderSelect>
</form>
}
})
React.render(<SingupForm></SingupForm>,document.body);
</script>
</body>
</html>
3. Mixin
Mixin含义：一组方法，
目的： 横向抽离出组件的相似代码
实例： 数据的双向绑定
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
</head>
<body>
<script type="text/jsx">
var BindingMixin = {
handleChange: function (key) {
var that = this
return function (event) {
var newState = {}
newState[key] = event.target.value
that.setState(newState)
}
}
};
var BindingExmple = React.createClass({
mixins:[BindingMixin],getInitialState : function () {
return {
text:'',content:''
}
},render: function () {
return <div>
<input type="text" placeholder="输入内容" onChange={this.handleChange('text')} />
<textarea onChange={this.handleChange('content')}></textarea>
<p>{this.state.text}</p>
<p>{this.state.content}</p>
</div>
}
});
React.render(<BindingExmple></BindingExmple>,document.body);
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。