react之props

在学习react中，组件和组件是相互独立的，，一个组件可能在不同地方被用到。但是在不同的场景下对这个组件的需求可能会根据情况有所不同。如何让组件能适应不同场景下的需求，我们就要让组件具有一定的“可配置”性。而props属性就是做这些事情的，它的作用主要是用于组件和组件之间的传输。

 

举例说明：

　　我想在两个组件  Ahao.js 和 Xhao.js  

　Ahao.js代码：　　　　　　

import React, {Component} from 'react';

import Xhao from './Xhao'


class Ahao extends Component {
    render(){
       const user = {
           "name":"吴彦祖",
           "age":43,
           "skill":"帅气"
       }

        return (
            <div>
                <h2>我是阿浩</h2> 
                <Xhao name={'wanghao'} age={18} user={user}>
                    <span>i am child</span>
                    <p style={{'textAlign':'center'}}>2333</p>
                </Xhao>

            </div>
        )
    }
}

export default Ahao    

　　

　Xhao.js代码：

　　　　

import React , {Component} from 'react';

class Xhao extends Component {
    render(){

        console.log(this.props);
        console.log(this.props.children)

        return (
            <div>
                <h3>哈哈哈</h3>
                <span>我叫{this.props.name},今年已经{this.props.age}岁了</span>
                <ul>
                    <li>{this.props.user.name}</li>
                    <li>{this.props.user.age}</li>
                    <li>{this.props.user.skill}</li>
                </ul>
                <div>
                    {this.props.children}
                </div>
            </div>
        )
    }
}

export default Xhao

 

　　详解：

　　　　首先Ahao.js是父组件，在代码中可以看到  <Xhao />组件在Ahao组件render里。

　　　　然后我们在 <Xhao /> 组件中给他传入 name,age user等参数给它。

　　　　

<Xhao  name={'ahao'} age={18} user={user} />

　　　　

　　　进入Xhao组件代码中，我们要接收父组件Ahao给我们传来的参数，就要用到 props。  那我们现在控制台打印一下: console.log(this.props)

结果就很明显了：拿到了 name age user参数。  其实已经over了，剩下的就像上面Xhao组件中代码一样，一个个拿过去渲染即可。  

 

不过props中有一个children属性。 什么意思呢？

在Ahao组件中  Xhao组件里面不光有 name age user 还有一段html代码

<span>i am child</span>
<p style={{'textAlign':'center'}}>2333</p>

这段代码怎么拿过来渲染呢，就要用到props.children,也如上代码所示。

 

 

还有一个不得不说：PropTypes  给组件的配置参数加上类型验证.  

什么意思？  简单点说就是拿到props参数后 比如 age是number  name是string   万一传错了怎么办  把age传成一个字符串了怎么办？ 所以propTypes 就是给这些定义类型验证的？

怎么用？  上代码。

import PropTypes from 'prop-types'

Xhao.propTypes = {
    name: PropTypes.string,
    age:PropTypes.number,
    user:PropTypes.object
};

over ..     （ps: 主要是写给自己看的，也算是笔记，也算是学习react心路历程。不喜忽喷）；