React基础语法

最新推荐文章于 2022-06-10 09:15:00 发布

花生糖葫芦侠

最新推荐文章于 2022-06-10 09:15:00 发布

阅读量124

点赞数

分类专栏： React教程系列

本文链接：https://blog.csdn.net/fenglixiong123/article/details/82564413

版权

React教程系列专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.base

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件化编程</title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
</head>
<body>

<div id="app1"></div>
<div id="app2"></div>

<script type="text/babel">

    //工厂函数组件
    function MyCompo1() {
        return <h2>自定义函数组件</h2>
    }

    //ES6类组件
    class MyCompo2 extends React.Component{
        render(){
            console.log(this);
            return <h1>自定义类组件</h1>;
        }
    }

    ReactDOM.render(<MyCompo1 />,document.getElementById('app1'));
    ReactDOM.render(<MyCompo2 />,document.getElementById('app2'));



</script>


</body>
</html>

2.props

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>props</title>
    <script src="../common/react/development.js"></script>
    <script src="../common/react-dom/development.js"></script>
    <script src="../common/babel.js"></script>
    <script src="../common/prop-types.js"></script>
</head>
<body>

<div id="app1"></div>
<div id="app2"></div>
<div id="app3"></div>
<div id="app4"></div>
<div id="app5"></div>
<div id="app6"></div>

<script type="text/babel">

    //1.定义组件
    function Person(props){
        return (
            <ul>
                <li>姓名：{props.name}</li>
                <li>年龄：{props.age}</li>
                <li>性别：{props.sex}</li>
            </ul>
        )
    }

    //2.指定属性默认值
    Person.defaultProps = {
        name:'mary',
        age:18,
        sex:'女'
    };

    //3.指定属性类型和必要限制
    Person.propTypes = {
        name:PropTypes.string.isRequired,
        age:PropTypes.number.isRequired,
        sex:PropTypes.string
    };

    //ES6类组件
    const Student = class extends React.Component{

        constructor(props){
            super(props);
        }

        render(){
            console.log("student---this:",this);
            return(
                <div>
                    <h1>{this.props.title}</h1>
                    <ul>
                        <li>姓名：{this.props.name}</li>
                        <li>年龄：{this.props.age}</li>
                        <li>性别：{this.props.sex}</li>
                        <li>工作：{this.props.work}</li>
                    </ul>
                </div>
            )
        }

    };

    const XiaoXueSheng = class extends Student{
        constructor(props){
            super(props);
        }
        render(){
            console.log("xiaoxuesheng---this:",this);
            return(
                <div>
                    <h1>{this.props.title}</h1>
                    <ul>
                        <li>姓名：{this.props.name}</li>
                        <li>年龄：{this.props.age}</li>
                        <li>性别：{this.props.sex}</li>
                        <li>工作：{this.props.work}</li>
                        <li>爱好：{this.props.hobby}</li>
                    </ul>
                </div>
            )
        }
    };

    const ZhongXueSheng = class extends Student{
        constructor(props){
            super(props);
        }
        render(){
            console.log("zhongxuesheng---this:",this);
            return(
                <div>
                    <h1>{this.props.title}</h1>
                    <ul>
                        <li>姓名：{this.props.name}</li>
                        <li>年龄：{this.props.age}</li>
                        <li>性别：{this.props.sex}</li>
                        <li>工作：{this.props.work}</li>
                        <li>爱好：{this.props.hobby}</li>
                    </ul>
                </div>
            )
        }
    };

    const DaXueSheng = class extends Student{
        constructor(props){
            super(props);
        }
        render(){
            console.log("daxuesheng---this:",this);
            return(
                <div>
                    <h1>{this.props.title}</h1>
                    <ul>
                        <li>姓名：{this.props.name}</li>
                        <li>年龄：{this.props.age}</li>
                        <li>性别：{this.props.sex}</li>
                        <li>工作：{this.props.work}</li>
                        <li>爱好：{this.props.hobby}</li>
                    </ul>
                </div>
            )
        }
    };

    const p1 = {
        name:'Jack',
        age:23,
        sex:'男',
        work:'学习'
    };
    const xiaoxuesheng = {
        title:'小学生',
        name:'Jack',
        age:23,
        sex:'男',
        work:'学习',
        hobby:'扔沙包'
    };
    const zhongxuesheng = {
        title:'中学生',
        name:'Jack',
        age:23,
        sex:'男',
        work:'学习',
        hobby:'打游戏'
    };
    const daxuesheng = {
        title:'大学生',
        name:'Jack',
        age:23,
        sex:'男',
        work:'学习',
        hobby:'谈恋爱'
    };


    const p = p1;

    ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>, document.getElementById('app1'));
    ReactDOM.render(<Person {...p}/>, document.getElementById('app2'));
    ReactDOM.render(<Student {...p}/>, document.getElementById('app3'));
    ReactDOM.render(<XiaoXueSheng {...xiaoxuesheng}/>, document.getElementById('app4'));
    ReactDOM.render(<ZhongXueSheng {...zhongxuesheng}/>, document.getElementById('app5'));
    ReactDOM.render(<DaXueSheng {...daxuesheng}/>, document.getElementById('app6'));



</script>


</body>
</html>

3.state

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>State</title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
</head>
<body>

<div id="app1"></div>

<script type="text/babel">

    //ES6类组件
    class Like extends React.Component{

        constructor(props){
            //调用父类的构造函数
            super(props);
            //初始化状态
            this.state = {
                isLikeMe:true
            }

            //将新增方法的this强制绑定this方法
            this.handleClick = this.handleClick.bind(this);

        }

        //新增的方法this默认不是组件对象
        handleClick(){
            console.log("handleClick--->this:",this);
            //获取原有状态
            const {isLikeMe} = this.state;
            //将状态取反
            const newLikeMe = !isLikeMe;
            //更新状态
            this.setState({
                isLikeMe:newLikeMe,
            })
        };



        //重写组件类的方法
        render(){
            console.log("render--->this:",this);
            //读取状态|解构赋值
            const {isLikeMe} = this.state;
            return <h2 onClick={this.handleClick}>{isLikeMe?'你喜欢我':'我喜欢你'}</h2>;
        }
    }

    ReactDOM.render(<Like />,document.getElementById('app1'));



</script>


</body>
</html>

4.refs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>props</title>
    <script src="../common/react/development.js"></script>
    <script src="../common/react-dom/development.js"></script>
    <script src="../common/babel.js"></script>
    <script src="../common/prop-types.js"></script>
</head>
<body>

<div id="app1"></div>
<div id="app2"></div>
<div id="app3"></div>
<div id="app4"></div>
<div id="app5"></div>
<div id="app6"></div>

<script type="text/babel">

    /*
        需求：
            1.点击按钮提示第一个输入框的值
            2.当第二个输入框失去焦点时候，提示这个框中的输入值
     */

    //ES6类组件
    const Example = class extends React.Component{

        constructor(props){
            super(props);
            //绑定函数this
            this.showContent1 = this.showContent1.bind(this);
            this.showContent2 = this.showContent2.bind(this);
            this.handleBlue = this.handleBlue.bind(this);
        }

        //利用老版本的ref字符串写法
        showContent1(){
            console.log("showContent1---this:",this);
            const input = this.refs.input1;
            alert(input.value);
        }

        //利用react推荐的ref写法
        showContent2(){
            console.log("showContent2---this:",this);
            alert(this.input2.value);
            console.log("showContent2:",this.input2)
        }

        //利用事件形参
        handleBlue(event){
            // alert(this.input3.value);
            const input = event.target;
            alert(input.value);
        }

        render(){
            console.log("example---this:",this);
            return(
                <div>
                    <input ref="input1" type="text"/>
                    <button onClick={this.showContent1}>显示内容</button>
                    <br/>
                    <input ref={(inst)=>this.input2 = inst} type="text"/>
                    <button onClick={this.showContent2}>显示内容</button>
                    <br/>
                    <input onBlur={this.handleBlue} ref={inst=>this.input3=inst} type="text" placeholder="失去焦点提示内容"/>
                </div>
            )
        }

    };


    ReactDOM.render(<Example/>, document.getElementById('app1'));


</script>


</body>
</html>

花生糖葫芦侠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
React基础语法

1.base&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;组件化编程&lt;/title&gt; &lt;script src="https://cdn.bootcss.co
复制链接

扫一扫