Verschönern Sie Eingabe-Tags in ReactJs mithilfe von CSS-Stilen

Question

Ich habe die folgende Komponente in meiner React JS-Anwendung:

const Input = ({name, ..rest}) =>
  zurückkehren (
      <div>
        <input type="text" name={name} {...rest}/>
        {Fehler && <span>Fehler: Bitte fügen Sie Ihren Namen hinzu</span>}
      </div>
  );
};

restDie Parameter umfassen alleReact.InputHTMLAttributes, wie z. B. erforderlich, Klassenname, ID usw.

Ich habe Probleme beim Hinzufügen des Attributs style Wenn ich so etwas hinzufüge:

margin-bottom: 45px

Dann gibt es ein Leerzeichen zwischen dem Eingabefeld und der Spanne, aber dieses Leerzeichen sollte der Abstand der gesamten Komponente sein, sodass der Abstand unterhalb der Komponente und nicht zwischen den Elementen der Komponente angewendet werden sollte.

Wie kann ich dieses Problem vermeiden und das Attribut ...rest beibehalten?

Hinweis: Zusätzlich zu style können Sie auch className, id, verwenden Kontext ;erforderlichetc.

Answer 1

您可以从rest中提取出style属性，然后删除其margin属性（之前设置的），并用您自定义的marginBottom: 45覆盖它。

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>
  );
};