logo标签列表

自定义React Hooks的Proptypes

reactjs
23

随着React hooks的到来，我们是否应该在React自定义hooks中使用prop-types？例如：

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

const useTitle = title => {
  React.useEffect(() => {
    document.title = title;
  }, [title]);
}

useTitle.propTypes = {
  title: PropTypes.string.isRequired,
};

export default useTitle;

上述方法是验证自定义React Hooks传递的参数是否正确的好方法吗？或者应该有不同的方式来验证传递给自定义hook的props/params，这只是一个简单的函数。

5个回答
14

不，React不会验证自定义hooks或内置hooks的props。

在这里查看updateFunctionComponent，它使用checkPropTypes为React组件验证prop types，然后使用hooks进行渲染，即查看renderWithHooks。

现在，如果您在renderWithHooks方法中查看，它会更新dispatcher并调用您的函数组件，而函数组件会调用您的自定义hook，因为它只是在函数组件内部的另一个函数调用。

您的自定义hook将调用内置hooks。可以在此处检查其实现。根据dispatcher的类型，它将调用内置hooks。如果在整个文件中搜索checkPropTypes，您将找不到验证逻辑或用于验证prop types的prop-types/checkPropTypes依赖项。

这里有一篇关于React hooks如何工作的好文章。

4

我正在使用PropTypes.checkPropTypes对useSelector hook进行类型检查，它对我很有效。

const useTitle = title => {
  React.useEffect(() => {
    document.title = withPropsValidation(title);
  }, [title]);
}

const withPropsValidation = props => {
  PropTypes.checkPropTypes(propTypes, props, 'prop', '')
  return props
}

const propTypes = {
  title: PropTypes.string.isRequired,
}

https://github.com/facebook/prop-types#proptypescheckproptypes

1

OP的方法存在问题，因为行const useTitle = title => { ... };实际上使得title成为通常被命名为props的参数名称。然后，useTitle.propTypes赋值就不准确了。

然而，OP的方法是可行的（需要修改）。以下是一种实现，展示如何使用PropTypes与自定义hook：

MyHook.jsx:

import { useEffect } from 'react';
import PropTypes from 'prop-types';

const useMyHook= ({ callback, ref }) => {
    ...do something...
};

useMyHook.propTypes = {
    callback: PropTypes.func.isRequired,
    ref: PropTypes.element.isRequired
};

export { useMyHook };

MyComponent.jsx:

import React, { useRef } from 'react';
import { useMyHook} from '.../MyHook.jsx';

const MyComponent = props => {
    const myRef = useRef(null);
    const myCallback = () => console.log('Hello');

    useMyHook({ ref: myRef, callback, myCallback });

    return <div ref={myRef}>Stuff...</div>;
};
1
-3

Typescript 是验证和检查 props 的最佳方式

import React from 'react';   

const useTitle = ({title}:{title?:string})=> {
  React.useEffect(() => {
    document.title = title;
  }, [title]);
}

export default useTitle;

或者

import React from 'react';   

type customPropType= {
    title?:string
}

const useTitle = ({title}:customPropType)=> {
  React.useEffect(() => {
    document.title = title;
  }, [title]);
}

export default useTitle;
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接