javascript - 如果我添加 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

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

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

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

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 的值进行验证

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

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, e.g. 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 记录的警告。