2025年react组件三大属性（react组件的类型）

编程日记 • 2025-07-07 17:33 • 阅读 62
<!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>
</head>
<body>
    <div id="test1"></div>
    <div id="test2"></div>

    <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/6.26.0/babel.min.js"></script>
    <script src="https://www.cnblogs.com/panghexin/js/prop-types.js"></script>

    <script type="text/babel">
       
    //    1、定义组件:方式1
    function Person(props) {
        return (
            <ul>
                <li>name：{props.name}</li>
                <li>age：{props.age}</li>
                <li>sex：{props.sex}</li>
            </ul>
        )
    }
    //方式2：使用类方式定义组件（运行时请将其中一个方式注释）
    class Person extends React.Component { 
        render() {
            return (
                <ul>
                <li>name：{this.props.name}</li>
                <li>age：{this.props.age}</li>
                <li>sex：{this.props.sex}</li>
            </ul>
            )
        }
    }
    //指定默认值
    Person.defaultProps = {
        name:'imaginecode',
        age: 17,
        sex:'woman'
    }
    //指定属性值的类型和必要性--使用prop-types.js库
    Person.propTypes = {
        name:PropTypes.string.isRequired,
        age:PropTypes.number.isRequired,
    }

    // 2、渲染组件标签
    const p1 = {
        name:'imaginecode',
        age: 19,
        sex:'man'
    }

    ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex} />,document.getElementById('test1'));   
    const p2 = {
        name:'imaginecode2'
    }

    ReactDOM.render(<Person name={p2.name}/>,document.getElementById('test2'));    
    </script>
</body>
</html>
2025年react组件三大属性（react组件的类型）

相关推荐
