Attention : Reçu vrai pour un attribut primaire non booléen

Question

J'ai créé un composant personnalisé pour le bouton comme ci-dessous

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

export default class Button extends Component {
  static propTypes = {
    primary: PropTypes.bool,
    block: PropTypes.bool,
    onClick: PropTypes.func.isRequired,
    children: PropTypes.string.isRequired,
    type: PropTypes.oneOf(['button', 'reset', 'submit', null]),
  };

  render() {
    const { onClick, type, children, primary, block } = this.props;
    const classes = ['common-button'];

    if (primary) {
      classes.push('primary');
    }

    if (block) {
      classes.push('block');
    }

    return (
      <button className={classNames(classes)} onClick={onClick} type={type} {...this.props}>
        {children}
      </button>
    );
  }
}

Et j'utilise ce composant comme :

<Button primary onClick={() => {}}>

Après avoir exécuté le code, j'obtiens un avertissement dans la console ci-dessous : Avertissement : Reçu true pour un attribut non booléen primary .

Answer 1

Vous devriez vous en sortir si vous extrayez simplement l'attribut primaire des accessoires avant de les ajouter au bouton. Ceci peut être réalisé par :

const {primary, ...buttonProps} = this.props;

return (
  <button className={classNames(classes)} onClick={onClick} type={type} {...buttonProps}>
    {children}
  </button>
);