React系列（三）props参数

菜单

简单的组建传参
如果我的参数是动态的，那么如何处理呢？
如何对参数进行限制？
类的构造器中props的使用

简单的组建传参

<!Doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!--引入React 核心库-->
    <script type="text/javascript" src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <!--引入React-dom 用于支持React操作DOM-->
    <script type="text/javascript" src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!--引入babel 用于Jsx转换称js-->
    <script type="text/javascript" src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">
        //1、创建一个类式组件
        
        class Person extends React.Component{

          
            render(){
                console.log(this)
                return (
                    <ul>
                        <li>姓名：{this.props.name}</li>
                        <li>性别：{this.props.sex}</li>
                        <li>年龄：{this.props.age}</li>
                    </ul>
                )
            }

           
        }
        
        //2、渲染虚拟DOM到页面
        ReactDOM.render(<Person name="Mikes" sex="男" age="女" />,document.getElementById('test'))
        /*
        1、React 解析组件<MyCommponment/>
        2、发现组件是类式定义，随后进行实例化，调用里面上的render，返回虚拟的DOM
        3、虚拟的DOM转为真实的DOM，随后呈现在页面中
        */
    </script>
</body>
</html>

改进方式：

<!Doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!--引入React 核心库-->
    <script type="text/javascript" src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <!--引入React-dom 用于支持React操作DOM-->
    <script type="text/javascript" src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!--引入babel 用于Jsx转换称js-->
    <script type="text/javascript" src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">
        //1、创建一个类式组件
        
        class Person extends React.Component{
            
            
            render(){
                console.log(this)
                const {name,sex,age} = this.props
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{sex}</li>
                        <li>年龄：{age}</li>
                    </ul>
                )
            }

           
        }
        
        //2、渲染虚拟DOM到页面
        ReactDOM.render(<Person name="Mikes" sex="男" age="女" />,document.getElementById('test'))
        /*
        1、React 解析组件<MyCommponment/>
        2、发现组件是类式定义，随后进行实例化，调用里面上的render，返回虚拟的DOM
        3、虚拟的DOM转为真实的DOM，随后呈现在页面中
        */
    </script>
</body>
</html>

如果我的参数是动态的，那么如何处理呢？

注意：因为加入了Babel+React所以展开运算符解析对象。｛…p｝传递props、传递标签属性
展开运算符。先给一个例子

<!Doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!--引入React 核心库-->
    <script type="text/javascript" src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <!--引入React-dom 用于支持React操作DOM-->
    <script type="text/javascript" src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!--引入babel 用于Jsx转换称js-->
    <script type="text/javascript" src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">
       let arr1 = [1,3,5,7,9]
       let arr2 = [2,4,6,8]
        //展开一个数组
       console.log(...arr1)

       //连接一个数组
       let arr3 = [...arr1,...arr2]
       console.log(arr3)

       //在函数中使用

       function sumreduce(...numbers){
            return numbers.reduce((preValue,CurrentValue)=>{
                return preValue+CurrentValue
            } )
       }

       console.log(sumreduce(1,2,3,4,5,6,7))


       //构造字面量对象使用时展开语法
       let Person = {name:"Tom",age:18}
       let Person2 = {...Person,sex:"boy"}
       let Person3 = {...Person,name:"Bin"}
       Person.name="Jerry"
       console.log(Person) //返回Jerry
       console.log(Person2) //返回Tom
       console.log(Person3) //返回Bin

    </script>
</body>
</html>

如何对参数进行限制？

引入prop-types.js，用于对组件标签属性进行限制

<!Doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
   <!-- 准备好一个容器 -->
   <div id="test"></div>

   <!--引入React 核心库-->
   <script type="text/javascript" src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
   <!--引入React-dom 用于支持React操作DOM-->
   <script type="text/javascript" src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
   <!--引入babel 用于Jsx转换称js-->
   <script type="text/javascript" src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
   <!--引入prop-->
   <script type="text/javascript" src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>

   <script type="text/babel">
       //1、创建一个类式组件
       class Person extends React.Component{
           render(){
               console.log(this)
               const {name,sex,age} = this.props
               return (
                   <ul>
                       <li>姓名：{name}</li>
                       <li>性别：{sex}</li>
                       <li>年龄：{age}</li>
                   </ul>
               )
           }   
       }

       Person.propTypes = {
            // 类型和必要性限制
            name: PropTypes.string.isRequired,
            age: PropTypes.number,
            sex: PropTypes.string,
            spack: PropTypes.func
        }
        Person.defaultProps = {
            // 默认值限制，如果没有进行传值，则使用默认值
            age: 21
        }

       
       const PersonParam = {name:"Mikes",sex:"男"}
       console.log('@',...PersonParam)
       //2、渲染虚拟DOM到页面
       ReactDOM.render(<Person {...PersonParam} />,document.getElementById('test'))
       /*
       1、React 解析组件<MyCommponment/>
       2、发现组件是类式定义，随后进行实例化，调用里面上的render，返回虚拟的DOM
       3、虚拟的DOM转为真实的DOM，随后呈现在页面中
       */
   </script>
</body>
</html>

类的构造器中props的使用

默认的情况，props是不会传递到构造器的

 class Person extends React.Component{

            constructor(props){
                super()
                console.log(props)  //输出props
                console.log(this.props)  //输出undefined
                //console.log("constructor",props)
            }

           render(){
              
               const {name,sex,age} = this.props
               return (
                   <ul>
                       <li>姓名：{name}</li>
                       <li>性别：{sex}</li>
                       <li>年龄：{age}</li>
                   </ul>
               )
           }   
       }

怎么可以让构造器中的this.props返回呢？

super(props)

<!Doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
   <!-- 准备好一个容器 -->
   <div id="test"></div>

   <!--引入React 核心库-->
   <script type="text/javascript" src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
   <!--引入React-dom 用于支持React操作DOM-->
   <script type="text/javascript" src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
   <!--引入babel 用于Jsx转换称js-->
   <script type="text/javascript" src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
   <!--引入prop-->
   <script type="text/javascript" src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>

   <script type="text/babel">
       //1、创建一个类式组件
       class Person extends React.Component{

            constructor(props){
                super(props)
                console.log(props)  //输出props
                console.log(this.props)  //输出undefined
                //console.log("constructor",props)
            }

           render(){
              
               const {name,sex,age} = this.props
               return (
                   <ul>
                       <li>姓名：{name}</li>
                       <li>性别：{sex}</li>
                       <li>年龄：{age}</li>
                   </ul>
               )
           }   
       }

       Person.propTypes = {
            // 类型和必要性限制
            name: PropTypes.string.isRequired,
            age: PropTypes.number,
            sex: PropTypes.string,
            spack: PropTypes.func
        }
       
       Person.defaultProps = {
            // 默认值限制，如果没有进行传值，则使用默认值
            age: 21
        }

       
       const PersonParam = {name:"Mikes",sex:"男"}
    
       //2、渲染虚拟DOM到页面
       ReactDOM.render(<Person {...PersonParam} />,document.getElementById('test'))
       /*
       1、React 解析组件<MyCommponment/>
       2、发现组件是类式定义，随后进行实例化，调用里面上的render，返回虚拟的DOM
       3、虚拟的DOM转为真实的DOM，随后呈现在页面中
       */
   </script>
</body>
</html>

函数式组件：

<!Doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
   <!-- 准备好一个容器 -->
   <div id="test"></div>

   <!--引入React 核心库-->
   <script type="text/javascript" src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
   <!--引入React-dom 用于支持React操作DOM-->
   <script type="text/javascript" src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
   <!--引入babel 用于Jsx转换称js-->
   <script type="text/javascript" src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
   <!--引入prop-->
   <script type="text/javascript" src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>

   <script type="text/babel">
       //1、创建一个函数式组件
       
       function Person(props){
        const {name,sex,age} = props
            return (
                <ul>
                    <li>姓名：{name}</li>
                    <li>性别：{sex}</li>
                    <li>年龄：{age}</li>
                </ul>
            )
       }

       Person.propTypes = {
            // 类型和必要性限制
            name: PropTypes.string.isRequired,
            age: PropTypes.number,
            sex: PropTypes.string,
            spack: PropTypes.func
        }
       
       Person.defaultProps = {
            // 默认值限制，如果没有进行传值，则使用默认值
            age: 21
        }
       const PersonParam = {name:"Mikes",sex:"男"}
       //2、渲染虚拟DOM到页面
       ReactDOM.render(<Person {...PersonParam} />,document.getElementById('test'))
       /*
       1、React 解析组件<MyCommponment/>
       2、发现组件是类式定义，随后进行实例化，调用里面上的render，返回虚拟的DOM
       3、虚拟的DOM转为真实的DOM，随后呈现在页面中
       */
   </script>
</body>
</html>

函数式组件，可以使用prop，但不可以使用state和ref

打赏赞