React第五节 组件三大属性之 props 用法详解

特性

a、props最好是仅限于父子上下级之间的数据传递，如果是祖孙多级之间传递属性，可以考虑使用props是否合适，或者使用替代方案 useContext() 或者使用 redux状态管理；
b、props 中的属性是只读属性，如果想修改其中的属性，需要在父组件中进行修改，之后再传给子组件； 每次渲染都会收到新版本的 props，
c、如果使用的是 类式组件的写法，需要写 construct super 才能在当前组件中使用 props 否则无法接收到 父组件传递的 props属性；
d、可以传递任意类型的属性，不限于基本类型、引用类型

1、Props基本用法： 主要以函数式写法说明，类式组件官网已不建议使用

    // 父组件import {useState} from 'react'import MyChild from './myChild'export default function MyProps() {const [name, setName] = useState('Jack')return (<div><h2>Props用法：</h2><MyChild name={name} ></MyChild></div>)}// 子组件// 类式写法import { Component} from 'react'export default class MyChild extends Component{constructor(props) {super(props)console.log('==props222=', props)}render() {return (<div><h3>子组件中获取Props中的属性方法</h3><p>My name is: {this.props.name}</p></div> )}}// 函数式写法export default function MyChild(props) {console.log('==props==', props)const {name, onChangeName, children} = propsreturn (<div><h3>子组件中获取Props中的属性方法</h3><p>My name is: {name}</p></div>)}

2、Props传递默认值

// 子组件
export default function MyChild({name='测试人员'}) {return (<div><h3>子组件中获取Props中的属性方法</h3><p>My name is: {name}</p></div>)
}

3、Props传递事件

    // 父组件import {useState} from 'react'import MyChild from './myChild'export default function MyProps() {const [name, setName] = useState()const onChangeName = (name) => {setName(name)}return (<div><h2>Props用法：</h2><MyChild name={name} onChangeName={onChangeName}></MyChild></div>)}

// 子组件 
export default function MyChild({name='测试', onChangeName}) {// console.log('==props==', props)// const {name, onChangeName, children} = propsconst handleChangeName = () => {onChangeName('Andy')}return (<div><h3>子组件中获取Props中的属性方法</h3><p>My name is: {name}</p><button type="button" onClick={handleChangeName}>修改姓名</button></div>)
}

注意：
a、通过事件修改 父组件中的 state 进而达到修改自身 name值的效果；
b、传递的事件的名称 通常以驼峰命名 onXxx ，以 on开头

4、Props传递children

// 父组件
import React, {useState} from 'react'
import MyChild from './myChild'
export default function MyProps() {const [name, setName] = useState()const onChangeName = (name) => {setName(name)}return (<div><h2>Props用法：</h2><MyChild name={name} onChangeName={onChangeName}><p>描述信息 通过 children 传入到 自组中</p>{<><div>123</div><h3>{456}</h3>{[678]}</>}</MyChild></div>)
}

// 子组件
export default function MyChild({name='测试', onChangeName, children}) {// console.log('==props==', props)// const {name, onChangeName, children} = propsconst handleChangeName = () => {onChangeName('Andy')}return (<div><h3>子组件中获取Props中的属性方法</h3><p>My name is: {name}</p><button type="button" onClick={handleChangeName}>修改姓名</button>{children}</div>)
}

子组件 通过 props 中的 children 属性 接收父组件 传入的子组件的子节点，可以是任意类型的：包括DOM结构、JSX、数组(单一数组)