React props属性使用及子传父组件使用

 props属性使用

创建一个类组件 

<script type="text/babel">
    // 创建一个类组件
    class Person extends React.Component {
        state = {
            personArr:[
                {
                    id:1,
                    age:0
                },
                {
                    id:2,
                    name:"张飞",
                    age:21
                },
            ]
        }
        add = ()=>{
            let { personArr } = this.state
            // personArr.unshift()
            let newArr = {
                id:3,
                name:"刘备",
                age:25
            }
            
            this.setState({
                personArr:[newArr,...personArr]
            },()=>{
                console.log(this.state.personArr)
            })
        }
        render() {
            return (
                <div>
                    <ul>
                        {
                            this.state.personArr.map((item,index)=>{
                                return  <li key = {item.id}>
                                            <Child name={item.name} age={item.age}/>
                                            <ChildFun fun={()=>{}} {...item}/>
                                        </li>
                            })
                        }
                    </ul>
                </div>
            )
        }
    }

接下来再创建两个子组件，有两种创建方式，第一种是函数组件，第二种是类组件

函数子组件

通过props接收值，可以直接props.name和age，propTypes可以验证子组件对父组件传递参数的数据校验，defaultProps设置props默认值

ChildFun是用了结构赋值{...item},所以可以直接使用props.获取值

// 函数组件
    function ChildFun (props) {
        console.log(props)
        return (<div>
                <p>名字：{props.name}</p>    
                <p>年龄：{props.age}</p>
            </div>)
    }
    // 子组件对父组件传递参数的类型校验
    ChildFun.propTypes = {
        name:PropTypes.string.is,
        age:PropTypes.number,
        fun:PropTypes.func
    }
    ChildFun.defaultProps = {
        name:"赵云",
        age:25,
        fun:()=>{}
    }

类子组件

Child用了直接赋值的形式，所以我们要使用this.props.属性获取属性值

    class Child extends React.Component{
        constructor(props) {
            super(props)
        }
        static propTypes = {
            name:PropTypes.string,
            age:PropTypes.number,
            fun:PropTypes.func
        }
        static defaultProps = {
            name:"赵云",
            age:25,
            fun:()=>{}
        }
        render() {
            console.log(this.props)
            return (
                <div>
                    <p>名字：{this.props.name}</p>    
                    <p>年龄：{this.props.age}</p>
                </div>
            )
        }
    }

 

---

 子传父组件使用

子传父步骤：

子传父，首先在父组件中定义一个函数，在函数中给他传一个值（形参）

在子组件中再给他定义一个函数，这个函数接收父组件中定义的函数

在父组件中可以传参数

父组件

// 父组件
class Person extends React.Component{
    state={
        PersonArr:[
            {
                id:1,
                name:'大哥',
                age:19
            },
            {
                id:2,
                name:'二弟',
                age:23
            },
        ]
    }
    add=(it)=>{
        console.log(it);
        
    }
    render(){
        let {PersonArr} =this.state
        return(
            <div>
                <ul>
                    {PersonArr.map((item)=>{
                        return <li key={item.id}>
                            {item.name}
                            <Child stu={this.add} {...item}/>
                            </li>
                    })}
                </ul>    
            </div>
        )
    }
}

子组件

// 子组件
class Child extends React.Component {
    constructor(props){
        super(props)
    }
    user=()=>{
        this.props.stu(this.props)
    }
  render() {
    return (
      <div>
        <ul>
            <button onClick={this.user}>点击</button>
        </ul>
      </div>
    )
  }
}