React 组件协同关系
组件协同的两种方法，1种是纵向的协同，就是组件嵌套，重点在于代码的封装，2种是横向协同也就是Mixin，组件抽离，重点在于代码复用
1、组件嵌套，父组件通过属性向子组件，子组件可以通过事件处理函数以委托的方式想父组件发送数据
1 <!DOCTYPE html>2 <html>
3 <head>
4 <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
5 <title>daomul's example</title>
6 <link rel="stylesheet" href="../shared/css/base.css" />
7 </head>
8 <body>
9 <h1>Text demo</h1>
10 <div id="container">
11
12 </div>
13
14 <script src="../shared/thirdparty/es5-shim.min.js"></script>
15 <script src="../shared/thirdparty/es5-sham.min.js"></script>
16 <script src="../shared/thirdparty/console-polyfill.js"></script>
17 <script src="../../build/react.js"></script>
18 <script src="../../build/JSXTransformer.js"></script>
19 <script type="text/jsx">
20
21 //选择组件
22 var GenderSelect = React.createClass({
23
24 render:function(){
25 console.log("render,4");
26 return <select onChange = {this.props.handleSelect}>
27 <option value = "0">男</option>
28 <option value = "1">女</option>
29 </select>;
30 },
31 });
32
33 //表单组件
34 var SignupForm = React.createClass({
35 getInitialState:function(){
36 return {
37 name :'',
38 password:'',
39 gender:0,
40 };
41 },
42 handleChange:function(name,event){
43 var newState = {};
44 newState[name] = event.target.value;
45 this.setState(newState);
46 },
47 handleSelect:function(event){
48 this.setState({gender:event.target.value});
49 },
50 render:function(){
51 console.log(this.state);
52 return <form>
53 <input type = "text" placeholder = "请输入用户名" onChange = {this.handleChange.bind(this,'name')} ></input>
54 <input type = "text" placeholder = "请输入密码" onChange = {this.handleChange.bind(this,'password')} ></input>
55 <GenderSelect type="text" handleSelect = {this.handleSelect}></GenderSelect>
56 </form>;
57 },
58 });
59
60 React.render(<SignupForm></SignupForm> ,document.body);
61
62 </script>
63 </body>
64 </html>
2、Mixin就是 横向抽离相似的代码
1 <!DOCTYPE html>2 <html>
3 <head>
4 <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
5 <title>daomul's example</title>
6 <link rel="stylesheet" href="../shared/css/base.css" />
7 </head>
8 <body>
9 <h1>Text demo</h1>
10 <div id="container">
11
12 </div>
13
14 <script src="../shared/thirdparty/es5-shim.min.js"></script>
15 <script src="../shared/thirdparty/es5-sham.min.js"></script>
16 <script src="../shared/thirdparty/console-polyfill.js"></script>
17 <script src="../../build/react.js"></script>
18 <script src="../../build/JSXTransformer.js"></script>
19 <script type="text/jsx">
20
21 //Mixin
22 var BindMixin = {
23 handleChange:function(key){
24 //先将this保存起来是因为在js中，方法内部再调用函数的话会使得this的丢失
25 var self = this
26 //这个变量如果放在function内部的话会加大构建的内存损耗
27 var newState = {}
28 return function(event){
29 //这里不能直接使用self.setState({key:event.targe.value})
30 //因为key是作为'key'字符串的存在传入的
31 newState[key] = event.target.value
32 self.setState(newState)
33 }
34 }
35 }
36 var TextClass = React.createClass({
37
38 //这里就是作为对Mixin的使用
39 mixins : [BindMixin],
40 getInitialState:function(){
41 return {
42 name :'',
43 password:'',
44 };
45 },
46 render:function(){
47 return <div>
48 <input type = "text" placeholder = "请输入用户名" onChange = {this.handleChange('name')} ></input>
49 <input type = "text" placeholder = "请输入密码" onChange = {this.handleChange('password')} ></input>
50 <p>{this.state.name}</p>
51 <p>{this.state.password}</p>
52 </div>;
53 },
54 });
55
56 React.render(<TextClass></TextClass> ,document.body);
57
58 </script>
59 </body>
60 </html>
以上是 React 组件协同关系 的全部内容， 来源链接： utcz.com/z/381990.html
