Question

我正在使用UI小部件库，我们称其为ui-library

import React from 'react';
import PropTypes from 'prop-types';
import { Button } from 'ui-library';

const ButtonHOC = ({
  id,
  resourceId,
  isEnabled = true,
  onClick,
  size = Button.size.NORMAL,
  type = Button.type.DEFAULT,
  className = '',
}) => {
  const handleClick = () => {
    onClick();
  };

  return (
    <Button id={idGenerator(id)} disabled={!isEnabled} type={type} size={size} onClick={handleClick} className={className}>
      <Res id={resourceId} />
    </Button>
  );
};

ButtonHOC.propTypes = {
  id: PropTypes.string.isRequired,
  resourceId: PropTypes.string.isRequired,
  isEnabled: PropTypes.bool,
  onClick: PropTypes.func.isRequired,
  size: PropTypes.string,
  type: PropTypes.string,
  className: PropTypes.string,
};

export default ButtonHOC;

通常，我需要/想要包装组件，以便它们具有默认值，以便简化其使用。

我通过HOC做到这一点。但是，正如迈克尔·杰克逊（Michael Jackson）解释的那样，HOC有其缺点（无法验证PropTypes，无法覆盖PropTypes等）。

是否有可能以其他方式（<{> HOC ）（例如render-props或其他方式）进行相同的操作？

谢谢

Answer 1

在以下代码中，var arr = [false, true, true, true] var score = 0 let sum = arr.reduce(0) { (result, next) -> Int in if next == true { score = score + 1 } return score }，size和type道具将与className组件的默认道具一起应用。

Button

更新：应该已定义import React from 'react'; import PropTypes from 'prop-types'; import { Button } from 'ui-library'; const ButtonHOC = ({ id, resourceId, isEnabled, size, type, className }) => ( <Button id={idGenerator(id)} disabled={!isEnabled} {...rest}> <Res id={resourceId} /> </Button> ); ButtonHOC.propTypes = { id: PropTypes.string.isRequired, resourceId: PropTypes.string.isRequired, isEnabled: PropTypes.bool, size: PropTypes.string, type: PropTypes.string, className: PropTypes.string, }; ButtonHoc.defaultProps = { isEnabled: true, size: null, type: null, className: null, } export default ButtonHOC;的{{1}}组件的大小，类型和className道具的默认值

将默认属性值应用于库中的组件

1 个答案: