Cantikkan teg input dalam ReactJs menggunakan gaya CSS

Question

Saya mempunyai komponen berikut dalam aplikasi React JS saya:

const Input = ({nama, ..rest}) =>
  kembali (
      <div>
        <jenis input="teks" nama={name} {...rest}/>
        {errors && <span>Error: Sila tambahkan nama anda</span>}
      </div>
  );
};

restParameter termasuk semuaReact.InputHTMLAttributes, seperti yang diperlukan, className, id, dsb.

Saya menghadapi masalah untuk menambah atribut gaya Jika saya menambah sesuatu seperti ini:

margin-bawah: 45px

Kemudian akan ada ruang kosong di antara kotak input dan span, tetapi kosong ini haruslah jarak keseluruhan komponen, jadi jarak harus digunakan di bawah komponen dan bukannya antara elemen komponen.

Bagaimana saya boleh mengelakkan masalah ini dan mengekalkan atribut ...rest

Nota: Selain style, anda juga boleh menggunakan className, id, konteks ;diperlukandll.

Answer 1

Anda boleh mengatasinya daripada 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>
  );
};