组件与props

组件的分类

一:函数组件/无状态组件

【首字母大写】

1·1：函数组件的语法

//创建一个组件 
function 组件的名称(){
            // 必须有return一个jsx
            return (
                <div></div>
            )
     }
//组件的调用
 <MyCom/>

父子组件

<script type="text/babel">
        // 创建父组件
        function Fu(){
            return (
                <div>
                    <h1>我是父组件</h1>    
                    <Zi/>
                </div>
            )
        }
        // 创建子组件
        function Zi(){
            return (
                <div>
                    <h1>我是子组件</h1>    
                </div>
            )
        }
          let el=(
                <div>
                   <h1>函数组件的父子嵌套</h1>
              			<Fu/>
                </div>
            )           ReactDOM.render(el,document.querySelector("#demodiv"))

2·1：无状态组件使用props

使用props就可以从外部向组件内部进行数据传递 完成父组件传值给子组件

• let {name,age,sex,love}=props;对象的解构赋值

【件中出现了很多次props 为了减少这些props的出现使用解构 完成】

• <MyCom {…obj} />：逆运算符

  【如果参数太多的话 我们可以使用扩展运算符解决】

// 函数组件在使用props的时候 只需要把props当成形参传递进去即可
function Mycon(props) {
        let { name, age, sex } = props
        return (
            <div>
                <p>{name}</p>
                <p>{age}</p>
                <p>{sex}</p>
            </div>
        )
    }
    let obj = {
        name: "嘎~嘎~嘎~",
        age: 8,
        sex: "男"

    }
    let el = (
        <div>
            <h6>函数组件的props使用</h6>
            <Mycon {...obj} />
        </div>
    )

    ReactDOM.render(el, document.querySelector("#demondiv"))

2·2：函数组件使用props的默认值

语法：[defaultProps,设置props的默认值]

 组件名.defaultProps={
          key:"默认数据"
     }

一般案例

    function Mycon(props) {
        return (
            <div>
                <h3>{props.name}</h3>
            </div>
        )
    }
    // props的默认值
	//要是name没有传值，就会出现默认值
    Mycon.defaultProps = {
        name: "默认的值了解一下"
    }
    let el = (
        <div>
            <Mycon />
        </div>
    )
    ReactDOM.render(el, document.getElementById("demon"))

2.3:函数组件的props验证

在react的15.5版本之后，props验证被迁移到了 prop-types库中

• 下载prop-types库
• 引用
• 使用

语法：

组件名.propTypes={

    }

一般案例

 <script src="./node_modules/prop-types/prop-types.js"></script>
 function Mycon(props) {
        return (
            <div>
                <h2>{props.name}</h2>
            </div>
        )
    }
    Mycon.propTypes={
        name:PropTypes.Number
    }

    let el=(
        <div>
        <Mycon name="lidaren"/>
        </div>
    )
    ReactDOM.render(el, document.getElementById("demon"))

二：class类组件

class 对应组件名 extends 继承于 React.Component 并且其中必须要有一个render的渲染方法 里面还要有一个renturn 用于返回一段jsx

2·1：class类组件语法

//创建组件   
class 组件的名称 extends React.Component{
    render(){
        return(
            <div>类组件你知道吗</div>
        )
    }
}
    let el = (
        <div>
            <Mycon />
        </div>
    )
    ReactDOM.render(el, document.getElementById("demon"))

2.2·类组件的props

基本语法：类组件使用props直接就可以在想用的地方是用 this.props.xxx

  class MyCom extends React.Component{
                render(){
                    //只不过此处使用了解构赋值
                     let {name,age}=this.props;
                    return (
                        <div>
                            <h1>{name}</h1>
                            <h1>{age}</h1>
                        </div>
                    )
                }
            }
            let el=(
                <div>
                    <MyCom name="我是名字" age="我是年龄"/>
                </div>
            )
          
            ReactDOM.render(el,document.querySelector("#demodiv"))

2·3：类组件的props的默认值

类组件在使用props默认值的时候语法和无状态组件相同 使用defaultPropos

2·4：类组件的props验证

类组件的props验证和函数组件使用方式相同 也是使用propTypes

)

 ReactDOM.render(el,document.querySelector("#demodiv"))

2·3：类组件的props的默认值

类组件在使用props默认值的时候语法和无状态组件相同 使用defaultPropos

2·4：类组件的props验证

类组件的props验证和函数组件使用方式相同 也是使用propTypes