React学习笔记16-属性props

1.属性的定义

props 是正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更

改，但是你可以通过父组件主动重新渲染的方式来传入新的 props。

这就是React中的单向数据流

2.属性的特点

属性是描述性质、特点的，组件自己不能随意更改，必须由父组件进行更改

3.属性的用法

在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为组件 props 对象的键值。

通过类创建的组件需要使用this.props来使用属性

import React, { Component } from 'react'
import Navbar from './Navbar'
export default class App extends Component {
    state = {
        //只能内部自己使用，外部无法改变
    }
    render() {
        //上面父组件传来的一个对象
        var obj = {
            title: '测试',
            leftshow: false
        }
        return (
            <div>
                <h2>首页</h2>
                <Navbar title="首页" leftshow={false} ></Navbar>
                <h2>列表</h2>
                <Navbar title="列表" leftshow={true} rightshow={true}></Navbar>
                <h2>购物车</h2>
                {/* 如果对象里面的属性和组件的属性key一样可以用拓展运算符直接结构obj放入组件 */}
                <Navbar title="购物车" {...obj}></Navbar>
            </div>
        )
    }
}

import React, { Component } from 'react'
import propTypes from "prop-types"
export default class Navbar extends Component {
    //a=100对象属性
    state = {
        //只能内部自己使用，外部无法改变
    }

    //用static修饰属性就是类属性
    static propTypes = {
        title: propTypes.string,
        leftshow: propTypes.bool,
        rightshow: propTypes.bool,
    }
    //用static修饰属性就是类属性
    static defaultProps = {
        //属性默认值
        leftshow: true,
        rightshow: true,
        title: ''
    }
    //属性是父组件传过来的，this.props
    render() {

        console.log(propTypes)
        let { title, leftshow, rightshow } = this.props

        return (
            <div style={{ display: 'flex' }}>
                {leftshow && <button>返回</button>}
                {/*   <div>{ this.props.title}</div> */}
                <div>{title}</div>
                {rightshow && <button>Home</button>}

            </div>
        )
    }
}
// Navbar.defalutProps={
//     leftshow:false,
//     rightshow:true,
//     title:''
// }
/* Navbar.propTypes = {
    title: propTypes.string,
    leftshow: propTypes.bool,
    rightshow: propTypes.bool,

} *///类属性
/* 
给组件类加上一个propTypes属性在里面使用prop-types模块封装好的方法即可
验证属性

*/

 

通过函数创建的组件，需要通过函数的参数来接收 props 

 

import React, { Component } from 'react'
import Navbar from './Navbar'
import Sidebar from './Sidebar'


export default class App extends Component {
    render() {
        return (
            <div>
                {/* 类组件 */}
                <Navbar title="导航"></Navbar>
                {/* 函数式组件 */}
                <Sidebar bg="yellow" position="left"></Sidebar>
            </div>
        )
    }
}

import React from 'react'
import propTypes from "prop-types"
export default function Sidebar(props) {
    console.log(props)
    let { bg, position } = props
    let obj = { backgroundColor: bg, position: "fixed" }
    let obj1 = { right: 0 }
    let obj2 = { left: 0 }
    // eslint-disable-next-line eqeqeq
    position == 'right' ? obj = { ...obj1, ...obj } : obj = { ...obj2, ...obj }
    return (
        <div style={obj}>
            <ul>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
            </ul>
        </div>
    )
}
//Sidebar.defaultProps 默认属性
Sidebar.defaultProps = {
    bg: 'red',
    position: 'fixed'
}
//Sidebar.propTypes 属性验证
Sidebar.propTypes = {
    bg: propTypes.string,
    position: propTypes.string
}

 

注意：

1).注意在传参数时候，如果写成isShow="true" 那么这是一个字符串 如果写成isShow={true} 这个

是布尔值

2).当你想要传递的属性key和value名字一致时，可以使用ES6的解构语法来快速赋值{...对象}

3)设置属性默认值，可以给属性设置默认值，当父组件没有传递属性时，子组件中会采用设置的默认值来使用。

在类组件和函数组件中设置属性默认值的方法是不同的

在类组件中，通过类属性defaultProps可以给属性设置默认值

 

  //用static修饰属性就是类属性
    static defaultProps = {
        //属性默认值
        leftshow: true,
        rightshow: true,
        title: ''
    }

在函数组件中，通过 函数名.defaultProps来设置属性的默认值

 

import React from 'react'

export default function Sidebar(props) {
    console.log(props)
    let { bg, position } = props
    let obj = { backgroundColor: bg, position: "fixed" }
    let obj1 = { right: 0 }
    let obj2 = { left: 0 }
    // eslint-disable-next-line eqeqeq
    position == 'right' ? obj = { ...obj1, ...obj } : obj = { ...obj2, ...obj }
    return (
        <div style={obj}>
            <ul>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
            </ul>
        </div>
    )
}
//Sidebar.defaultProps 默认属性
Sidebar.defaultProps={
    bg:'red',
    position:'fixed'
}

 

4).设置属性的类型验证，可以通过设置属性的类型验证来限制属性的类型。

 

注意在进行类型验证时需要先导入React自带的prop-types

 

import propTypes from "prop-types"

 

 

 

同样类组件是通过静态属性propTypes来设置类型验证

 

static propTypes = {
        title: propTypes.string,
        leftshow: propTypes.bool,
        rightshow: propTypes.bool,
    }

函数组件是通过组件名.propTypes来设置类型验证

import React from 'react'
import propTypes from "prop-types"
export default function Sidebar(props) {
    console.log(props)
    let { bg, position } = props
    let obj = { backgroundColor: bg, position: "fixed" }
    let obj1 = { right: 0 }
    let obj2 = { left: 0 }
    // eslint-disable-next-line eqeqeq
    position == 'right' ? obj = { ...obj1, ...obj } : obj = { ...obj2, ...obj }
    return (
        <div style={obj}>
            <ul>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
            </ul>
        </div>
    )
}
//Sidebar.defaultProps 默认属性
Sidebar.defaultProps = {
    bg: 'red',
    position: 'fixed'
}
//Sidebar.propTypes 属性验证
Sidebar.propTypes = {
    bg: propTypes.string,
    position: propTypes.string
}