组件实例三大属性之props

最新推荐文章于 2022-09-14 23:36:01 发布

qq_38721353

最新推荐文章于 2022-09-14 23:36:01 发布

阅读量121

点赞数

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

本文链接：https://blog.csdn.net/qq_38721353/article/details/112602719

版权

React 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了React组件中props的使用，包括如何传递参数、存储形式以及基本使用示例。同时，文章还讲解了如何对props进行类型和必要性的限制，通过`propTypes`设置属性限制，并使用`defaultProps`指定默认属性值，确保组件的健壮性。

摘要由CSDN通过智能技术生成

1、作用：给组件传递参数
2、存储形式：{key:value}

props的基本使用例子1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../../js/react.development.js"></script>
    <script type="text/javascript" src="../../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../../js/babel.min.js"></script>
    
</head>
<body>
    <div id = "root">
    </div>

    <script type="text/babel">
        class Person extends React.Component{
         render(){
            const {name,age,sex}=this.props
             return (
                <ul>
                    <li>姓名：{name}</li>
                    <li>性别：{sex}</li>
                    <li>年龄：{age}</li>
                </ul>
             )
         }
        }
        const p={name:'宋争艳',sex:'女',age:18}
        ReactDOM.render(<Person {...p}/>,document.getElementById('root')) //这个地方的{}不是展开运算符复制数组用的，是babel和react的一个语法
    </script>
    
</body>
</html>

对props属性进行限制

<script type="text/javascript" src="../../js/prop-types.js"></script>
<body>
    <div id = "root">
    </div>

    <script type="text/babel">
        class Person extends React.Component{
         render(){
            const {name,age,sex}=this.props
             return (
                <ul>
                    <li>姓名：{name}</li>
                    <li>性别：{sex}</li>
                    <li>年龄：{age}</li>
                </ul>
             )
         }
        }
        //对标签属性进行类型、必要性的限制
        Person.propTypes={
            name:PropTypes.string.isRequired, //限制name为字符串
            sex:PropTypes.string,
            age:PropTypes.number, //限制age为number
            speak:PropTypes.func //限制speak为函数，func是为了避免和关键字冲突
        }
        //指定默认标签属性值
        Person.defaultProps={  
            sex:'男',
            age:18

        }
        const p={name:'宋争艳',sex:'女',age:18}
        ReactDOM.render(<Person {...p}/>,document.getElementById('root')) //这个地方的{}不是展开运算符复制数组用的，是babel和react的一个语法
    </script>
    
</body>

在组件内部对props进行限制并设置默认值

<body>
    <div id = "root">
    </div>

    <script type="text/babel">
        class Person extends React.Component{
        //对标签属性进行类型、必要性的限制
             static propTypes={
            name:PropTypes.string.isRequired, //限制name为字符串
            sex:PropTypes.string,
            age:PropTypes.number, //限制age为number
            speak:PropTypes.func //限制speak为函数，func是为了避免和关键字冲突
        }
        //指定默认标签属性值
        static defaultProps={  
            sex:'男',
            age:18

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

        const p={name:'宋争艳',sex:'女',age:18}
        ReactDOM.render(<Person {...p}/>,document.getElementById('root')) //这个地方的{}不是展开运算符复制数组用的，是babel和react的一个语法
    </script>
    
</body>