当前位置：首页 > article >正文

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

article 2024/11/22 17:32:25

特性

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} = props
    return (
        <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} = props
    const 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} = props
    const handleChangeName = () => {
        onChangeName('Andy')
    }
  return (
    <div>
      <h3>子组件中获取Props中的属性方法</h3>
      <p>My name is: {name}</p>
      <button type="button" onClick={handleChangeName}>修改姓名</button>
      {children}
    </div>
  )
}