React技巧：如何为多个元素的属性赋予相同值？

你可以用对象展开语法来解决这个问题，把重复使用key的属性打包成一个对象，再通过...展开到JSX元素中，避免反复写相同的赋值逻辑。

方法一：提取共享属性对象（可读性更高） #

用map替代for循环（更符合React的函数式写法），同时把重复的属性抽成单独的对象：

const [formData, setFormData] = React.useState({
  firstName: "",
  lastName: "",
  email: ""
});

const formElements = Object.entries(formData).map(([key]) => {
  // 把重复赋值的属性统一放在这里
  const sharedProps = {
    key,
    name: key,
    placeholder: key
  };

  return <input type="text" onChange={handleChange} {...sharedProps} />;
});

方法二：内联展开（更紧凑） #

如果属性不多，也可以直接在JSX里内联展开这个对象，省掉单独的变量声明：

const [formData, setFormData] = React.useState({
  firstName: "",
  lastName: "",
  email: ""
});

const formElements = Object.entries(formData).map(([key]) => (
  <input
    type="text"
    onChange={handleChange}
    {...{ key, name: key, placeholder: key }}
  />
));

额外优化点 #

如果后续需要调整属性值（比如把placeholder改成首字母大写的形式），直接在共享属性里修改就行，不用逐个改每个input：

const sharedProps = {
  key,
  name: key,
  placeholder: key.charAt(0).toUpperCase() + key.slice(1)
};

内容的提问来源于stack exchange，提问作者Osher