反应HOC的JSDoc标记支持(高阶组件)

Question

使用JSDoc记录React高阶组件的正确方法是什么？当然,内置的React特定标签没有 - 所以什么是正确的方法？

Answer 1

在 React 中构建 UI 时，HOC 模式是代码重用的一个非常重要的工具。Prop 类型有助于在 bug 进入生产环境之前捕获它们。

然而，编写 HOC 来正确处理它们所包装的组件的 prop 类型是很困难的，并且需要大量的样板代码。理想情况下，工程师不应该回避将逻辑转移到 HOC，因为编写逻辑太冗长了。

为了解决这个问题，react-create-hoc 提供了一个函数来实现这个样板文件的大部分内容。它允许仅使用一个简单的函数来创建 HOC，该函数只需将一个组件包装在一个新组件中。

用法

import React from 'react';
import PropTypes from 'prop-types';
import createHOC from 'react-create-hoc';

function WelcomeMessage({ name }) {
  return <div>{greeting}, {name}!</div>;
}

WelcomeMessage.propTypes = {
  greeting: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
};

const withModifiedName = createHOC(
  'withModifiedName',
  (ComponentToWrap, nameModifier) => {
    function WithModifiedName({ nameProvider, ...rest }) {
      return (
        <ComponentToWrap
          name={nameModifier(nameProvider())}
          {...rest}
        />
      );
    }

    WithModifiedName.propTypes = {
      nameProvider: PropTypes.func.isRequired,
    };

    return WithModifiedName;
  },
  {
    factory: true,
    passedProps: ['name'],
  },
);

// WrappedWelcomeMessage has the following prop types:
// {
//   greeting: PropTypes.string.isRequired,
//   nameProvider: PropTypes.func.isRequired,
// }
const WrappedWelcomeMessage = withModifiedName(
  // nameModifier param
  name => name.toUpperCase(),
)(WelcomeMessage);

// Renders a div containing, "Rise and shine, MR. FREEMAN!"
ReactDOM.render(
  <WrappedWelcomeMessage
    greeting="Rise and shine"
    nameProvider={() => 'Mr. Freeman'}
  />,
  document.getElementById('root'),
);