好客租房56-props深入(3props校验-约束规则)

1常见类型:Array,bool,func,number,object,string

2React:element

3必填项:isRequred

4特定结构的想:shape({})

    //导入react
    import React from 'react'
    import ReactDOM from 'react-dom'
    import PropTypes from "prop-types"
    //导入组件
    // 约定1:类组件必须以大写字母开头
    // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性
    // 约定3:组件必须提供render方法
    // 约定4:render方法必须有返回值
     
    const App = (props) => {
        
            const arr = props.colors
            const lis = arr.map((item, index) => <li key={index}>{item}</li>)
            return <ul>{lis}</ul>
        
    }
    App.propTypes={
        colors:PropTypes.array,
        a:PropTypes.number,
        //节点
        tag:PropTypes.element
    }
     
    ReactDOM.render(<App colors={"1"}></App>, document.getElementById('root'))
 

posted @ 2022-05-21 09:18  前端导师歌谣  阅读(27)  评论(0编辑  收藏  举报