组件实例三大属性之props的使用

最新推荐文章于 2024-11-11 16:50:54 发布

种草小妖儿.

最新推荐文章于 2024-11-11 16:50:54 发布

阅读量148

点赞数

分类专栏： React 文章标签： react.js 前端

本文链接：https://blog.csdn.net/S2763427717/article/details/131258484

版权

React 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

props的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>props基本使用</title>
</head>
<body>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <div id="test1"></div>
    <div id="test2"></div>

    <script type="text/babel">
        class Person extends React.Component{
            render(){
                console.log(this);
                const {name,age,sex} = this.props;
                return(
                    <ul>
                        <li>{name}</li>
                        <li>{age+1}</li>
                        <li>{sex}</li>
                    </ul>
                )
            }
        }
        ReactDOM.render(<Person name = "sun" age = {18} sex = "woman"/>,document.getElementById("test1"))

        const p = {name:'yuan',age:19,sex:"man"}
        ReactDOM.render(<Person {...p}/>,document.getElementById("test2"))

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

运行效果
在这里插入图片描述

props限制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对props进行限制</title>
</head>
<body>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <!-- 引入prop-types,用于对组件标签属性进行限制 -->
    <script src="../js/prop-types.js"></script>

    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>


    <script type="text/babel">
        class Person extends React.Component{
            render(){
                console.log(this);
                const {name,age,sex} = this.props;
                return(
                    <ul>
                        <li>{name}</li>
                        <li>{age+1}</li>
                        <li>{sex}</li>
                    </ul>
                )
            }
        }
        // 对标签属性进行类型、必要性的限制
        Person.propTypes = {
            // 必传且为字符串
            name:PropTypes.string.isRequired,
            // 字符串
            sex:PropTypes.string,
            // 数字
            age:PropTypes.number,
            // 函数
            speak:PropTypes.func
        }
        // 对标签默认属性值设置
        Person.defaultProps = {
            sex:"男",
            age:12
        }

        function speak() {
            console.log('说话');
        }

        ReactDOM.render(<Person name = "sun" age = {18} sex = "woman"/>,document.getElementById("test1"))
        ReactDOM.render(<Person name = "feng" age = {3} speak = {speak}/>,document.getElementById("test2"))
        const p = {name:'yuan',sex:"man"}
        ReactDOM.render(<Person {...p}/>,document.getElementById("test3"))

    </script>

</body>
</html>

运行效果
在这里插入图片描述

props简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>props的简写方式</title>
</head>
<body>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <!-- 引入prop-types,用于对组件标签属性进行限制 -->
    <script src="../js/prop-types.js"></script>

    <div id="test1"></div>
    <script type="text/babel">
        class Person extends React.Component{
            // constructor(props){
            //     super(props);
            //     console.log('props',props);
            //     console.log('this.props',this.props);
            // }
            
            // 对标签属性进行类型、必要性的限制
            static propTypes = {
                // 必传且为字符串
                name:PropTypes.string.isRequired,
                // 字符串
                sex:PropTypes.string,
                // 数字
                age:PropTypes.number,
            }
            // 对标签默认属性值设置
            static defaultProps = {
                sex:"男",
                age:12
            }
            
            render(){
                console.log(this);
                const {name,age,sex} = this.props;
                return(
                    <ul>
                        <li>{name}</li>
                        <li>{age+1}</li>
                        <li>{sex}</li>
                    </ul>
                )
            }
        }
        
        ReactDOM.render(<Person name = "sun"/>,document.getElementById("test1"))

    </script>

</body>
</html>

运行效果
在这里插入图片描述

函数组件使用props

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

<head>
    <meta charset="UTF-8">
    <title>函数组件使用props</title>
</head>

<body>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <!-- 引入prop-types,用于对组件标签属性进行限制 -->
    <script src="../js/prop-types.js"></script>

    <div id="test1"></div>


    <script type="text/babel">
        function Person(props) {
            const { name, age, sex } = props
            return (
                <ul>
                    <li>姓名：{name}</li>
                    <li>年龄：{age + 1}</li>
                    <li>性别：{sex}</li>
                </ul>
            )
        }
        Person.propTypes = {
            // 必传且为字符串
            name:PropTypes.string.isRequired,
            // 字符串
            sex:PropTypes.string,
            // 数字
            age:PropTypes.number,
        }
        // 对标签默认属性值设置
        Person.defaultProps = {
            sex:"男",
            age:12
        }

        ReactDOM.render(<Person name="sun" />, document.getElementById("test1"))

    </script>

</body>

</html>