(精华2020年5月22日更新) react基础篇父组件传值到子组件prop的使用

最新推荐文章于 2023-10-31 14:56:52 发布

2b勿扰

最新推荐文章于 2023-10-31 14:56:52 发布

阅读量1.4w

点赞数 1

分类专栏： (持续更新)react基础篇文章标签： reactjs

本文链接：https://blog.csdn.net/weixin_41181778/article/details/106292524

版权

(持续更新)react基础篇专栏收录该内容

20 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>prop</title>
</head>
<body>
    <div id="app">

    </div>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
        // 复杂的组件 es6 class
        class Complex extends React.Component{
            constructor(props){
                super(props)
            }
            render(){
                // 通过this.props 来接收
                console.log(this.props);
                // this.props.hobby = '打篮球'
                // this.props = {}
                const {name,sex,age} = this.props
                return (
                    <div>
                        <h1>姓名:{name}</h1>
                        <h1>性别:{sex}</h1>
                        <h1>年龄:{age}</h1>
                    </div>
                )
            }
        }
        const info = {
            name:'张三',
            // sex:'男',
            // age:18
        }
        Complex.propTypes = {
            name:PropTypes.string.isRequired
        }
        Complex.defaultProps = {
            sex:'男',
            age:19
        }
        // 定义一个人员信息 信息从外部传入
        // 1 姓名必须指定 2 性别没有指定的话 默认为男 3年龄没有指定的话 默认为18
        ReactDOM.render(<Complex {...info}/>,document.getElementById("app"))
    </script>
</body>
</html>