React之props详解

什么是 Props

1.props是正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的 props

2.React 非常灵活，但它也有一个严格的规则：

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

纯函数：输入一定，输出一定确定

总的来说，在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为组件 props 对象的键值，但是不能直接更改 props。

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

通过类创建的组件，需要通过 this.props来接收。

props设置默认值

import { Component } from 'react';
interface isState { }
// 如果需要给子组件设置默认值
// 不管是类组件 还是 函数式组件，在定义组件之后，添加defaultProps属性即可
// 如果是类组件，还可以通过 类的静态属性 设置默认值
interface HeaderProps {
    name: string;
}
const Header = (props: HeaderProps) => {
    // 为什么react中组件的首字母必须大写？
    // 如果小写，被视为 html 固有的标签，而html固有标签如果没有，则不显示
    console.log(props);
    return (
        <header>{props.name} 核心库只关注于视图层</header>
    )
}
Header.defaultProps = {
    name: 'React.js'
}
class Content extends Component<any, isState> {
    static defaultProps = { // 类的静态属性
        version: 16.8
    }
    render() {
        console.log(this.props);
        return (
            <div>react {this.props.version} 推出了 react hooks</div>
        )
    }
}
const Footer = ({ msg }: { msg: string }) => {
    return (
        <footer>react真的很{msg}</footer>
    )
}
Footer.defaultProps = {
    msg: '简单'
}
class App extends Component<any, isState> {
    render() {
        return (
            <>
                <Header></Header>
                <Content></Content>
                <Footer></Footer>
            </>
        )
    }
}
export default App;

父组件给子组件传值

import { Component } from 'react';
interface isState { }
interface HeaderProps {
    name: string;
}
interface ContentProps {
    version: number;
}
interface FooterProps {
    msg: string;
}
const Header = (props: HeaderProps) => {
    return (
        <header>{props.name} 核心库只关注于视图层</header>
    )
}
class Content extends Component<ContentProps, isState> {
    render() {
        return (
            <div>react {this.props.version} 推出了 react hooks</div>
        )
    }
}
const Footer = ({ msg }: { msg: string }) => {
    return (
        <footer>react真的很{msg}</footer>
    )
}
class App extends Component<any, isState> {
    render() {
        return (
            <>
                <Header name="React.js "></Header>
                <Content version={16.8}></Content>
                <Footer msg="简单"></Footer>
            </>
        )
    }
}
export default App;

使用 prop-types 属性验证

自 React v15.5 起，React.PropTypes 已移入另一个包中。请使用 prop-types 库 代替。

cnpm i prop-types -D

import { Component } from 'react';
import PropTypes from 'prop-types';
class App extends Component<any> {
    render() {
        return (
            <></>
        )
    }
}
App.propTypes = {
    // 你可以将属性声明为 JS 原生类型，默认情况下这些属性都是可选的。
    optionalArray: PropTypes.array,
    optionalBool: PropTypes.bool,
    optionalFunc: PropTypes.func,
    optionalNumber: PropTypes.number,
    optionalObject: PropTypes.object,
    optionalString: PropTypes.string,
    optionalSymbol: PropTypes.symbol,
    // 任何可被渲染的元素（包括数字、字符串、元素或数组）(或 Fragment) 也包含这些类型。
    optionalNode: PropTypes.node,
    // 一个 React 元素。
    optionalElement: PropTypes.element,
    // 一个 React 元素类型（即，MyComponent）。
    optionalElementType: PropTypes.elementType,
    // 你也可以声明 prop 为类的实例，这里使用 JS 的 instanceof 操作符。
    optionalMessage: PropTypes.instanceOf(Message),
    // 你可以让你的 prop 只能是特定的值，指定它为 枚举类型。
    optionalEnum: PropTypes.oneOf(['News', 'Photos']),
    // 一个对象可以是几种类型中的任意一个类型
    optionalUnion: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number,
        PropTypes.instanceOf(Message)
    ]),
    // 可以指定一个数组由某一类型的元素组成
    optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
    // 可以指定一个对象由某一类型的值组成
    optionalObjectOf: PropTypes.objectOf(PropTypes.number),
    // 可以指定一个对象由特定的类型值组成
    optionalObjectWithShape: PropTypes.shape({
        color: PropTypes.string,
        fontSize: PropTypes.number
    }),
    // 对象有额外属性将会警告
    optionalObjectWithStrictShape: PropTypes.exact({
        name: PropTypes.string,
        quantity: PropTypes.number
    }),
    // 你可以在任何 PropTypes 属性后面加上 `isRequired` ，确保这个 prop 没有被提供时，会打印警告信息。
    requiredFunc: PropTypes.func.isRequired,
    // 任意类型的必需数据
    requiredAny: PropTypes.any.isRequired,
    // 你可以指定一个自定义验证器。它在验证失败时应返回一个 Error 对象。
    // 请不要使用 `console.warn` 或抛出异常，因为这在 `oneOfType` 中不会起作用。
    customProp: function (props: { [x: string]: string; }, propName: string, componentName: string) {
        if (!/matchme/.test(props[propName])) {
            return new Error(
                'Invalid prop `' + propName + '` supplied to' +
                ' `' + componentName + '`. Validation failed.'
            );
        }
    },
    // 你也可以提供一个自定义的 `arrayOf` 或 `objectOf` 验证器。
    // 它应该在验证失败时返回一个 Error 对象。
    // 验证器将验证数组或对象中的每个值。验证器的前两个参数
    // 第一个是数组或对象本身
    // 第二个是他们当前的键。
    customArrayProp: PropTypes.arrayOf(function (propValue, key, componentName, location, propFullName) {
        if (!/matchme/.test(propValue[key])) {
            return new Error(
                'Invalid prop `' + propFullName + '` supplied to' +
                ' `' + componentName + '`. Validation failed.'
            );
        }
    })
};
export default App;