React面向组件编程--组件实例的三大核心属性--props简单使用组件实例的props属性简单使用批量传递pro

简单使用

组件实例的props属性简单使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.5.0/umd/react.development.js"></script>
<!-- 引入react-dom用于支持react操作DOM -->
<script src="https://cdn.staticfile.org/react-dom/16.5.0/umd/react-dom.development.js"></script>
<!-- 引入babel用于ES6转ES5，jsx 转 js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<body>
    <!--准备一个容器-->
    <div id="test"></div>
    <div id="test2"></div>
    <div id="test3"></div>
</body>
<!-- 注意这里一定要添加babel，表示这里写的是jsx，用babel翻译为js-->
<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.渲染组件到页面
    ReactDOM.render(<Person name="atu" age="20" sex = "n"/>,document.getElementById('test'))
    ReactDOM.render(<Person name="w" age="20" sex = "n"/>,document.getElementById('test2'))
    ReactDOM.render(<Person name="p" age="20" sex = "n"/>,document.getElementById('test3'))
</script>
</html>

批量传递props

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.5.0/umd/react.development.js"></script>
<!-- 引入react-dom用于支持react操作DOM -->
<script src="https://cdn.staticfile.org/react-dom/16.5.0/umd/react-dom.development.js"></script>
<!-- 引入babel用于ES6转ES5，jsx 转 js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<body>
    <!--准备一个容器-->
    <div id="test"></div>
    <div id="test2"></div>
    <div id="test3"></div>
</body>
<!-- 注意这里一定要添加babel，表示这里写的是jsx，用babel翻译为js-->
<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.渲染组件到页面
    ReactDOM.render(<Person name="atu" age="20" sex = "n"/>,document.getElementById('test'))
    ReactDOM.render(<Person name="w" age="20" sex = "n"/>,document.getElementById('test2'))
    const data = {name:'wawan',sex:'s',age:'23'}
    // ReactDOM.render(<Person name={data.name} age={data.age} sex = {data.sex}/>,document.getElementById('test3'))
    ReactDOM.render(<Person {...data}/>,document.getElementById('test3'))
</script>
</html>

对字符串进行限制

必要性限制

数据类型限制

默认值限制

使用prop-types库进行限制

函数式组件是可以用props属性的，但是不可以用state和ref属性需要用this.的时候需要构造器，其他情况可以不用构造器