ReactJS - Props 验证

ReactJS - Props 验证

Props 验证是 React 开发中至关重要的实践。它有助于确保组件接收到正确类型和结构的 props，从而使应用更健壮、更易于维护。通过定义预期的 prop 类型，你可以在开发早期捕获错误，因为如果验证失败，React 会在控制台中发出警告。它还能很好地作为组件使用方式的文档。

使用 prop-types 包进行 Props 验证

自 React 15.5 版本起，React.PropTypes 被移至一个名为 prop-types 的单独包中。你需要安装它（npm install prop-types 或 yarn add prop-types），并将其导入到你的组件文件中。

在此示例中，我们创建一个函数组件 ValidatedApp，并使用 ValidatedApp.propTypes 定义其预期的 props。我们还提供了 ValidatedApp.defaultProps，用于定义父组件可能未提供的任何 props 的默认值。

ValidatedApp.jsx

import React from 'react';
import PropTypes from 'prop-types'; // Import PropTypes

function ValidatedApp(props) {
    return (
        <div>
            <h3>Array: {props.propArray.join(', ')}</h3>
            <h3>Bool: {props.propBool ? "True..." : "False..."}</h3>
            <h3>Func Result: {props.propFunc(3)}</h3>
            <h3>Number: {props.propNumber}</h3>
            <h3>String: {props.propString}</h3>
            <h3>Object Name1: {props.propObject.objectName1}</h3>
            <h3>Object Name2: {props.propObject.objectName2}</h3>
            <h3>Object Name3: {props.propObject.objectName3}</h3>
        </div>
    );
}

ValidatedApp.propTypes = {
    propArray: PropTypes.array.isRequired,
    propBool: PropTypes.bool.isRequired,
    propFunc: PropTypes.func,
    propNumber: PropTypes.number,
    propString: PropTypes.string,
    propObject: PropTypes.shape({
        objectName1: PropTypes.string,
        objectName2: PropTypes.string,
        objectName3: PropTypes.string
    })
};

ValidatedApp.defaultProps = {
    propArray: [1, 2, 3, 4, 5],
    propBool: true,
    propFunc: function(e) { return `Input was ${e}`; },
    propNumber: 42,
    propString: "Default String value...",
    propObject: {
        objectName1: "defaultObjectValue1",
        objectName2: "defaultObjectValue2",
        objectName3: "defaultObjectValue3"
    }
};

export default ValidatedApp;

main.js (或 index.js - 入口文件)

import React from 'react';
import ReactDOM from 'react-dom/client';
import ValidatedApp from './ValidatedApp.jsx';

const container = document.getElementById('app');
const root = ReactDOM.createRoot(container);

// Render with default props
root.render(<ValidatedApp />);

// Example of rendering with custom props (some valid, some to test validation)
/*
root.render(
    <ValidatedApp
        propNumber={100}
        propString={"Custom String"}
        // propArray={ "not an array" } // This would cause a warning
    />
);
*/

当使用默认 props 或有效的自定义 props 渲染时，组件会按预期显示值。例如，数组 [1, 2, 3, 4, 5] 将显示为 ‘Array: 1, 2, 3, 4, 5’。

处理验证警告

你会注意到 isRequired 用于 propArray 和 propBool。如果这些 props 没有提供（并且不在 defaultProps 中），React 会在控制台中发出警告。例如，如果你从 defaultProps 中移除了 propArray 并且在渲染 <ValidatedApp /> 时没有传递它，你会看到一个类似以下的警告：

Warning: Failed prop type: The prop 'propArray' is marked as required in 'ValidatedApp', but its value is 'undefined'.

类似地，如果你传递了错误类型的 prop，React 也会警告你。例如，如果你尝试给 propArray 传递一个数字（例如，<ValidatedApp propArray={123} />），你会收到一个类似以下的警告：

Warning: Failed prop type: Invalid prop 'propArray' of type 'number' supplied to 'ValidatedApp', expected 'array'.

这些警告在开发过程中非常宝贵，可以帮助你尽早发现潜在问题。