三大框架之React

最新推荐文章于 2019-11-25 15:51:16 发布

rodgers VV

最新推荐文章于 2019-11-25 15:51:16 发布

阅读量203

点赞数

分类专栏： js 文章标签： react

本文链接：https://blog.csdn.net/William526/article/details/88756904

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

引入react文件跑起页面：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>        //必须放在第一行引入
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>

    <script type="text/babel">        //babel编译，把jsx语法编译成js语法
        ReactDOM.render(
             <div>                            //外层必须用div包起来
                <h1>hello ， reactjs</h1>
                <h1>hello ， reactjs</h1>
            </div>,
            document.getElementById('app')    
        );
    </script>
</body>
</html>

vscode可以安装插件Live-server工具，可以直接打开文件；

jsx语法要点：

jsx解析时，遇到<>会按照标签去解析，遇到{}会按照js表达式解析：

ReactDOM.render(
    <div>{1+2}</div>,
    document.getElementById('xxx')
);


渲染多个元素时，必须有一个外层div包裹起来，
渲染的元素必须是闭合标签，（带有/）
<input type='text' />

Component:

 // 创建一个react组件：
        let Mycomponent = React.createClass({        //组件名必须大写
            render:function(){
                return <h2> hello reactjs </h2>        //return 值不能换行
            }
        });
        ReactDOM.render(
           <div>
                <Mycomponent></Mycomponent>
            </div>,
            document.getElementById('app')
        );

组件要点：组件名必须为大写，jsx解析机制把尖括号内首字母大写的编译成组件，小写的编译成HTML标签

组件之间的传值：Props

父传子：

组件使用时传值：（自定义名称）
 <Ipt showName='姓名' text_toast = '请输入用户名'></Ipt>
 <Ipt showName='密码' text_toast = '请输入密码'></Ipt>
 <Btn gongneng='注册'></Btn>
 <Btn gongneng='登录'></Btn>


组件内部使用时：
this.props.属性名    拿到值

 <label>{this.props.showName}</label>
 <input placeholder={this.props.text_toast} type='text' />        //属性需要大括号解析


 <button>{this.props.gongneng}</button>

父组件传递给子组件方法调用：（解耦合）

父传子：在父组件上定义方法，通过props属性传递给子组件，子组件onClick事件调用传过来的值this.props .xxx

子组件：
let Btn = React.createClass({
            render:function(){
                return (
                    <button onClick={this.props.handles}>{this.props.textName}</button>
                )
            }
        });

父组件：
let Form = React.createClass({
                handleLogin:function(){
                    console.log('登录');
                },
                handleRegister:function(){
                    console.log('注册');
                },
            render:function(){
                return <div>
                    <Ipt textName='姓名'></Ipt>
                    <Ipt textName='密码'></Ipt>
                    <Btn handles={this.handleLogin} textName='登录'></Btn>
                    <Btn handles={this.handleRegister} textName='注册'></Btn>
                </div>
            }
        });

子传父：父组件定义方法并添加形参，通过props传递给子组件，子组件调用并传递参数，父组件方法即可执行

子组件：
let Btn = React.createClass({
            handleReselve:function(){
                this.props.handles('你好啊');        //子组件调用父组件的方法，把参数传递过去
            },
            render:function(){
                return (
                    <button onClick={this.handleReselve}>{this.props.textName}</button>
                )
            }
        });


let Form = React.createClass({
                handleLogin:function(arg){        //父组件接受参数
                   // 拿到子传递过来的数据
                    console.log(arg);
                },
            render:function(){
                return <div>
                    <Btn handles={this.handleLogin} textName='登录'></Btn>
                </div>
            }
        });

拿到组件标签内部的元素：

this.props.children方法，但是如果没有元素返回undefined,有一个元素返回object，有两个及以上元素返回array,我们需要去判断，比较麻烦，所以我们React提供了一个方法React.Children.map(a,b);参数1是this.props.children,参数2是一个迭代函数function(val,index){val是该dom元素，index是下标}

             <Form>
                <div>我是子对象1</div>
                <div>我是子对象2</div>
                <div>我是子对象3</div>
            </Form>,


let Form = React.createClass({
            render:function(){
                return <div>
                    {
                        React.Children.map(
                            this.props.children,
                            function(val,index){
                                console.log(val,index);
                                return val;                //返回该元素
                            }
                        )
                    }
                </div>
            }
        });


如果业务逻辑比较多的话，可以放在方法里：
 display_list:function(){
                   return React.Children.map(            //注意要return ！
                            this.props.children,
                            function(val,index){
                                console.log(val,index);
                                return val;                //注意要return ！
                            }
                        )
                },


{this.display_list()}

如何拿到dom对象？ref

 <input type='text' ref='names'/>
给元素添加一个ref 属性，要使用的时候就 this.refs.names 即可

如何获取一个组件的内部的变量？ref

组件btn:
let Btn = React.createClass({
            count:1,
            render:function(){
                return (
                    <h2>我是一个h2</h2>
                )
            }
        });

使用：
let Form = React.createClass({
            click:function(){
                console.log(this.refs.btn.count);                打印count值：1
            },
            render:function(){
                return <div>
                    <Btn ref='btn'></Btn>                //指定ref
                    <button onClick={this.click}>我是按钮，获取值</button>
                </div>
            }
        });