React学习笔记（6）---组件协同使用介绍

最新推荐文章于 2023-02-13 16:40:31 发布

thystar

最新推荐文章于 2023-02-13 16:40:31 发布

阅读量654

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/thystar/article/details/48092871

版权

web前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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>

thystar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React学习笔记（6）---组件协同使用介绍

1. 介绍：对组件的组织和管理方式目的：逻辑信息代码模块化封装细节提高代码的复用性实现：组件嵌套(实现代码封装)Mixin（实现代码的复用）2. 组件嵌套组件嵌套本质是父子关系：父组件通过属性向子组件通信，子组件向父组件通信：子组件调用父组件的的通信：委托；实例：
复制链接

扫一扫