处理使用 object 破坏和 object rest 的组件的道具类型的正确方法是什么...传播收集道具

Question

I have a component like so:

import React from 'react'
import { bool } from 'prop-types'

const Component = ({ active, ...rest}) => (
  // ...does things
)

Component.propTypes = {
  active: bool.isRequired,
  // -> how do i handle { ...rest } here?
  rest: object // ? works, but is it the right solution?
}

Component destructures its props , grabbing the active prop and collecting the "rest" into rest . Is there a way to validate rest using prop-types ? Is it required? Not sure what to do.

Answer 1

https://www.ian-thomas.net/custom-proptype-validation-with-react/

Basically, prop-types does allow custom validation. You set it to

Component.propTypes = {
  rest: function(props, propName, componentName) { // return null if all is well }
}

Answer 2

Although it's late, here I'm leaving a snippet of how I do things in case I want to extend a library or same concept can be utilized when building own component

(This is in case you don't want to use typescript and stay with plain old javascript)

import React from "react";
import PropTypes from "prop-types";
import { Button } from "reactstrap";

let BtnBaseProps = Object.assign(
  {
    leftIcon: "",
    rightIcon: "",
  },
  Button.prototype.props
);

/**
 *
 * @param {BtnBaseProps} props
 * @returns
 */
const BtnBase = (props) => {
  return (
    <Button {...props}>
      {props.leftIcon ? <i className={sicon + " mr-2"} /> : null}
      {props.children}
      {props.rightIcon ? <i className={eicon + " ml-2"} /> : null}
    </Button>
  );
};

BtnBase.propTypes = {
  leftIcon: PropTypes.string,
  rightIcon: PropTypes.string,
  ...(Button.propTypes && Button.propTypes),
};

export default BtnBase;