<p>J'ai le composant suivant dans mon application React JS : </p> <pre class="brush:php;toolbar:false;">const Input = ({name, ..rest}) => retour ( <div> <input type="texte" nom={nom} {...rest}/> {erreurs && <span>Erreurs : veuillez ajouter votre nom</span>} </div> ); };</pré> <p><code>rest</code>Les paramètres incluent tous les<code>React.InputHTMLAttributes<HTMLInputElement></code>, tels que requis, className, id, etc. </p><p>J'ai du mal à essayer d'ajouter l'attribut <code>style</code> Si j'ajoute quelque chose comme ceci : </p> <p><code>marge inférieure : 45px</code></p> <p> Ensuite, il y aura un espace vide entre la zone de saisie et la travée, mais cet espace doit être l'espacement de l'ensemble du composant, donc l'espacement doit être appliqué sous le composant plutôt qu'entre les éléments du composant. </p> <p>Comment puis-je éviter ce problème et conserver l'attribut <code>...rest</code> sur la balise d'entrée ? </p> <p>Remarque : En plus de <code>style</code>, vous pouvez également utiliser <code>className</code>, <code>id</code>, <code> contexte ;obligatoire</code>etc. </p>

const Input = ({ name, style, ...rest }) => {
  const { margin, ...restStyles } = style;
  const newStyles = {
    ...restStyles,
    marginBottom: 45,
  };

  return (
      <div>
        <input type="text" name={name} {...rest} style={newStyles} />
                                               // ^^^^^^^^^ 应用新样式
        {errors && <span>错误：请添加您的姓名</span>}
      </div>
  );
};