React之props详解

时间：2025-01-21 08:18:31

什么是 Props

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

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

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

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

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

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

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

props设置默认值

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

使用 prop-types 属性验证

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

cnpm i prop-types -D
import { Component } from 'react';
import PropTypes from 'prop-types';
class App extends Component<any> {
    render() {
        return (
            <></>
        )
    }
}
 = {
    // 你可以将属性声明为 JS 原生类型，默认情况下这些属性都是可选的。
    optionalArray: ,
    optionalBool: ,
    optionalFunc: ,
    optionalNumber: ,
    optionalObject: ,
    optionalString: ,
    optionalSymbol: ,
    // 任何可被渲染的元素（包括数字、字符串、元素或数组）(或 Fragment) 也包含这些类型。
    optionalNode: ,
    // 一个 React 元素。
    optionalElement: ,
    // 一个 React 元素类型（即，MyComponent）。
    optionalElementType: ,
    // 你也可以声明 prop 为类的实例，这里使用 JS 的 instanceof 操作符。
    optionalMessage: (Message),
    // 你可以让你的 prop 只能是特定的值，指定它为 枚举类型。
    optionalEnum: (['News', 'Photos']),
    // 一个对象可以是几种类型中的任意一个类型
    optionalUnion: ([
        ,
        ,
        (Message)
    ]),
    // 可以指定一个数组由某一类型的元素组成
    optionalArrayOf: (),
    // 可以指定一个对象由某一类型的值组成
    optionalObjectOf: (),
    // 可以指定一个对象由特定的类型值组成
    optionalObjectWithShape: ({
        color: ,
        fontSize: 
    }),
    // 对象有额外属性将会警告
    optionalObjectWithStrictShape: ({
        name: ,
        quantity: 
    }),
    // 你可以在任何 PropTypes 属性后面加上 `isRequired` ，确保这个 prop 没有被提供时，会打印警告信息。
    requiredFunc: ,
    // 任意类型的必需数据
    requiredAny: ,
    // 你可以指定一个自定义验证器。它在验证失败时应返回一个 Error 对象。
    // 请不要使用 `` 或抛出异常，因为这在 `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: (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;

相关文章