如果我添加 PropTypes，是否需要检查 typeof？

Question

我有一个道具onNotifyChange它是一个函数，我在输入的onChange中调用它。

它有一个func的 PropType 。

MyComponent.propTypes = {
    onNotifyChange: PropTypes.func,
}

调用onNotifyChange ，是否需要检查typeof

const onChange = e => {
    // do some stuff
    if(onNotifyChange && typeof onNotifyChange === 'function'){
        onNotifyChange()
    }
}

或者只是检查它是否是假的？

const onChange = e => {
    // do some stuff
    if(onNotifyChange){
        onNotifyChange()
    }
}

PropTypes.bar是否不需要检查typeof foo === 'bar' ？

Answer 1

建议定义 defaultProps。

MyComponent.defaultProps = {
    onNotifyChange: () => false
}

这将处理您“忘记”传递onNotifyChange 。

如果没有定义 defaultProps，你会遇到，

Uncaught TypeError: _this10.props.onNotifyChange is not a function

Answer 2

是的，即使使用prop-types也需要检查prop-types 。 prop-types库在 React 的开发模式下为您提供运行时警告。

在下面的示例中，我们使用的是 React 的开发版本。 我们有一个具有所需功能道具的组件H1 。 请注意，在App使用H1组件时，如果没有为className道具传递值，则会引发错误，并且prop-types已记录警告。

因此，您不能依靠prop-types来防止不良道具传递给孩子。

 function H1({ className, children }) { // this will throw if className is not a function return <h1 className={className()}>{children}</h1> } H1.propTypes = { className: PropTypes.func.required } function App() { return <H1>Test</H1> } ReactDOM.render(<App />, document.querySelector("#root"))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.development.js"></script> <div id=root></div>

为了防止这种事情在运行时发生，你可以：

• 为 prop 声明一个默认值
• 对组件内 prop 的值进行验证

更好的是，您可以同时执行这两项操作，如下例所示：

 function H1({ className, children }) { /* do some validation of your props (throwing here to demonstrate that the default prop set below works - I do not recommend throwing errors within components like this unless you know what you're doing, eg have an error boundary to catch behaviour like this) */ if (typeof className !== "function") { throw new Error("expecting className prop to be function") } return <h1 className={className()}>{children}</h1> } H1.propTypes = { className: PropTypes.func.required } H1.defaultProps = { className: () => "" } function App() { return <H1>Test</H1> } ReactDOM.render(<App />, document.querySelector("#root"))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.development.js"></script> <div id=root></div>

这样你的应用程序就不会因为 prop 值错误而崩溃，并且在开发模式下你会看到prop-types记录的警告。

Answer 3

取决于：一般来说，没有； 在实践中......也许。

类型检查（通常）不会发生在生产版本中。 如果您有动态构造的属性，其中类型可能无效，那么您仍然需要某种形式的错误处理。

Answer 4

来自prop-types 包

如果它们不匹配，则在开发中发出警告

所以prop-types只会“保护”你在开发. 当您的代码运行时，它不会做任何事情（除了在控制台上抛出错误之外）。

如果您需要硬类型检查，请使用typescript ......尽管这些只是在开发+构建期间，所以...... JS 中没有任何东西可以在运行时保护您免受错误类型的影响（除了在编写时进行显式检查），因为它是毕竟是弱类型语言。