React组件协同使用

来源：互联网发布：上海房多多端口销售编辑：程序博客网时间：2024/05/10 18:12

组件协同的本质是对组件的一种组织、管理方式。

1.组件嵌套

2.Mixin(混入，把一段代码混到组件中)

一、组件嵌套

本质是父子关系。

父组件 —（属性）—子组件

子组件—（事件处理函数（委托））—父组件

优点：

逻辑清晰：父子关系

代码模块化：同步开发

封装细节

缺点：

编写难度高：处理父子关系

无法掌握细节

实例代码如下：

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="UTF-8">    <title>父子关系</title></head><body><script src="./build/react.js"></script><script src="./build/JSXTransformer.js"></script><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 SignupForm = React.createClass({        getInitialState: function() {            return {                name: '',                password: '',                gender: '',            }        },        handleChange: 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.handleChange.bind(this, 'name')} />                <input type="password" placeholder="请输入密码" onChange={this.handleChange.bind(this, 'password')} />                <GenderSelect handleSelect={this.handleSelect}></GenderSelect>            </form>        }    })    React.render(<SignupForm></SignupForm>, document.body);</script></body></html>

二、Mixin编写和使用

Mixin=一组方法

Mixin的目的是横向抽离出组件的相似代码

相似概念：面向切面编程、插件

优点：

代码复用

即插即用

适应性强

缺点：

编写难度高

降低代码可读性

代码如下：

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="UTF-8">    <title>Mixin</title></head><body><script src="./build/react.js"></script><script src="./build/JSXTransformer.js"></script><script type="text/jsx">    /*var BindingExample = React.createClass({        getInitialState:function () {            return {                text:''            }        },        handleChange:function (event) {            this.setState({text:event.target.value});        },        render:function () {            return <div>                    <input type="text" placeholder="请输入内容" onChange={this.handleChange}/>                    <p>{this.state.text}</p>                </div>        }    });*/    var BindingMixin = {        handleChange:function (key) {            var that = this;            return function () {                var newState = {};                newState[key] = event.target.value;                that.setState(newState);            }        },    };    var BindingExample = React.createClass({        mixins:[BindingMixin],        getInitialState:function () {            return {                text:'',                comment:''            }        },        render:function () {            return <div>                <input type="text" placeholder="请输入内容" onChange={this.handleChange('text')}/>                <textarea onChange={this.handleChange('comment')}></textarea>                <p>{this.state.text}</p>                <p>{this.state.comment}</p>            </div>        }    });    React.render(            <BindingExample></BindingExample>,document.body    );</script></body></html>

1 0