你如何为 React 中必需道具的可选子属性默认默认道具？

Question

I have a required object, but not all of it's children are required.

For example, this is what I'm trying to do:

import PropTypes from 'prop-types';

const propTypes = {
  bike: PropTypes.shape({
    id: PropTypes.number.isRequired,
    color: PropTypes.string
  }).isRequired
}
const defaultProps = {
  bike: {
    color: 'red'
  }
}

In this example, I'm trying to say that the bike object is required with an id, but the color is not required and will be red by default.

With my ESLint rules (AirBnb's default set for the most part), I get the following error:

defaultProp "bike" defined for isRequired propType. (react/default-props-match-prop-types)

Any ideas on how to do this properly?

Answer 1

This makes no sense to do anyway. Default props does a shallow merge which means that when you supply the bike prop it will overwrite the default prop you set.

Also, are you actually setting the default props and prop types on the component?