React基本使用(引用版)

于 2017-11-29 00:42:16 发布
阅读量3.2k 收藏 1
点赞数 1
分类专栏： 知识点 文章标签： react

参考:
菜鸟react

react-template 模板
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>React-Template</title>
    <script src="../js/react.min.js"></script>
    <script src="../js/react-dom.min.js"></script>
    <!-- 转换浏览器 接受的语法  -->
    <script src="../js/browser.min.js"></script>
</head>
<body>
    <!-- 容器 -->
    <!-- ReactDOM.render  -->
    <div id="box"></div>
    <script type='text/babel'>
        var myStyle = {
            fontSize: 14,
            color: 'green'
        },
        i = 1,
        arr = [
            <h1>数组形式</h1>,
            <h2>数组2</h2>,
        ];
        ReactDOM.render(
            <div>
                <h1 style= {myStyle} >菜鸟教程</h1>
                <h2>欢迎学习 React { i == 1? '1' : '0' }</h2>
            {/*  注释..  */}
                {arr}
            </div>,
            document.getElementById('box')
        );
    </script>
</body>
</html>

引用 格式:
这里写图片描述

使用:
这里写图片描述

react-组件
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>React-组件</title>
    <script src="../js/react.min.js"></script>
    <script src="../js/react-dom.min.js"></script>
    <script src="../js/browser.min.js"></script>
</head>
<body>
    <div id="box"></div>
    <script type='text/babel'>
    // 组件名 开头大写  需要拥有根标签包裹
    //在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
    //  组件 属性--> this.props.属性名
        var MyComponent = React.createClass({
            render: function(){
                return (
                    <div>
                        <h2>{this.props.title}!</h2>
                        <p className='ONE' htmlFor='one'>正文</p>
                    </div>
                    );
            }
        })
        ReactDOM.render(
            <div>
                <MyComponent title="henery" />
                <MyComponent title="aisx" />
            </div>,
            document.getElementById('box')
        );
    </script>
</body>
</html>

这里写图片描述

react-事件
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>React-事件</title>
    <link rel="stylesheet" href="../css/main.css">
    <script src="../js/react.min.js"></script>
    <script src="../js/react-dom.min.js"></script>
    <script src="../js/browser.min.js"></script>
</head>
<body>
    <div id="box"></div>
    <script type='text/babel'>
        var Comment = React.createClass({
            edit: function(){
                alert('edit Comment');
            },

            remove: function(){
            {/* 事件  this  绑定*/}
                alert('remove Comment');
            },

            render: function(){
                return (
                    <div className='commentContainer'>
                        <div>{this.props.children}</div>
                    {/* 事件onClick  */}
                        <button className='button-primary' onClick={this.edit} >edit</button>
                        <button className='button-danger' onClick={this.remove} >remove</button>
                    </div>
                    );
            }
        })
        ReactDOM.render(
            <div className='board'>
                <Comment>hello every</Comment>
                <Comment>hello apple</Comment>
            </div>,
            document.getElementById('box')
        );
    </script>
</body>
</html>

这里写图片描述

react-状态state,属性props
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>React-state</title>
    <script src="../js/react.min.js"></script>
    <script src="../js/react-dom.min.js"></script>
    <script src="../js/browser.min.js"></script>
</head>
<body>
    <div id="box"></div>
    <script type='text/babel'>
        var Checked = React.createClass({
            getInitialState() {
                return {
                    check: true
                };
            },
            handleClick() {
                this.setState({
                    check: !this.state.check
                })
            },
            render() {
                return (
                    <div>
                        <input type="checkbox" checked={this.state.check} onChange={this.handleClick} />
                        <p>this is {this.state.check ? 'checked' : 'unchecked'}</p>
                        <p>{this.props.title}</p>
                    </div>
                );
            }
        })
        ReactDOM.render(
            <Checked title='属性props稳定值. 状态state易改' />,
            document.getElementById('box')
        );
    </script>
</body>
</html>

这里写图片描述

react-状态应用
react-状态应用
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>React-状态应用 </title>
    <link rel="stylesheet" href="../css/main.css">
    <script src="../js/react.min.js"></script>
    <script src="../js/react-dom.min.js"></script>
    <script src="../js/browser.min.js"></script>
</head>
<body>
    <div id="box"></div>
    <script type='text/babel'>
        var Comment = React.createClass({
            getInitialState(){
                return {
                    status: false,
                    change: false,
                    value: ''
                };
            },

            edit: function(){
                this.setState({
                    status: true
                })
            },

            remove: function(){
            {/* 事件  this  绑定*/}
                alert('remove Comment');
            },
            save(){
                var values = document.getElementById('text').value;
                this.setState({
                    status: false,
                    change: true,
                    value: values
                })
            },
            normal(){
                return (
                    <div className='commentContainer'>
                        <div>{this.state.change?this.state.value:this.props.children}</div>
                        <button className='button-primary' onClick={this.edit} >edit</button>
                        <button className='button-danger' onClick={this.remove} >remove</button>
                    </div>
                    );
            },
            change(){
                return (
                    <div className='commentContainer'>
                        <textarea defaultValue={this.state.change?this.state.value:this.props.children} id='text'></textarea>
                        <button className='button-success' onClick={this.save} >save</button>
                    </div>
                    );
            },
            render: function(){
                return this.state.status?this.change():this.normal();
            }
        })
        ReactDOM.render(
            <div className='board'>
                <Comment>hello every</Comment>
                <Comment>hello apple</Comment>
            </div>,
            document.getElementById('box')
        );
    </script>
</body>
</html>

这里写图片描述

React-组件嵌套,跨组件调用
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>React-组件嵌套,跨组件调用 </title>
    <link rel="stylesheet" href="../css/main.css">
    <script src="../js/react.min.js"></script>
    <script src="../js/react-dom.min.js"></script>
    <script src="../js/browser.min.js"></script>
</head>
<body>
    <div id="box"></div>
    <script type='text/babel'>
        var Comment = React.createClass({
            getInitialState(){
                return ({
                    status: false
                });
            },

            edit: function(){
                this.setState({
                    status: true
                })
            },

            remove: function(){
            {/* 事件  this  绑定*/}
                this.props.dataRemove(this.props.index);
            },
            save(){
                var val = this.refs.newText.value;
                // 调用 上级传过来的方法
                this.props.dataUpdate(val,this.props.index);
                this.setState({
                    status: false
                })
            },
            normal(){
                return (
                    <div className='commentContainer'>
                        <div>{this.props.children}</div>
                        <button className='button-primary' onClick={this.edit} >edit</button>
                        <button className='button-danger' onClick={this.remove} >remove</button>
                    </div>
                    );
            },
            change(){
                return (
                    <div className='commentContainer'>
                {/* ref  当前这个标签*/}
                        <textarea ref='newText' defaultValue={this.props.children}></textarea>
                        <button  className='button-success'  onClick={this.save} >save</button>
                    </div>
                    );
            },
            render: function(){
                return this.state.status?this.change():this.normal();
            }
        })
        var Board = React.createClass({
            getInitialState(){
                return ({
                    comments: ['hello,world','book','apple']
                });
            },
            update(newText,i){
                var arr = this.state.comments;
                arr[i] = newText;
                this.setState({
                    comments: arr
                });
            },
            del(i){
                var arr = this.state.comments;
                arr.splice(i,1);
                this.setState({
                    comments: arr
                });
            },
            add(text){
                var arr = this.state.comments;
                arr.push(text);
                this.setState({
                    comments: arr
                });
            },
            render(){
                {/*遍历 map*/}
                {/*
                    return( 根标签 )
                        key优化
                    向下级组件传递方法
                */}

                return (
                    <div>
                        <button className='button-success' onClick={this.add.bind(null,'default text')}>add new</button>
                        <div className='board create'>
                            {
                                this.state.comments.map(function (item,i) {
                                    return (
                                        <Comment dataRemove={this.del}  dataUpdate={this.update} key={i} index={i} >{item}</Comment>
                                        );
                                }.bind(this))
                            }
                        </div>
                    </div>
                    )
            }
        })
        ReactDOM.render(
            <Board />,
            document.getElementById('box')
        );
    </script>
</body>
</html>
多个组件. 嵌套. 遍历 map

这里写图片描述

这里写图片描述

这里写图片描述

显示:

这里写图片描述

Board内属性记录方法, Comment内调用

这里写图片描述

this.refs使用

这里写图片描述

维克多噗噗
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值