React+react-bootstrap中如何简化重复属性的Form.Control代码？

当然可以，有两种简单的方法帮你复用这些重复属性，直接上手就行：

方法一：定义公共属性对象，通过展开运算符复用 #

直接把重复的属性打包成一个对象，在每个Form.Control里用ES6的展开运算符{...}把属性传进去，代码会清爽很多：

import { Form } from 'react-bootstrap';

function YourComponent({ editable }) {
  // 把重复的属性统一定义在这里
  const commonControlProps = {
    size: "sm",
    plaintext: !editable,
    readOnly: !editable
  };

  return (
    <Form>
      <Form.Control {...commonControlProps} type="text" placeholder="输入内容1" />
      <Form.Control {...commonControlProps} type="email" placeholder="输入邮箱" />
      <Form.Control {...commonControlProps} as="textarea" placeholder="输入描述" />
    </Form>
  );
}

如果某个Form.Control需要单独修改某条属性（比如某个输入框需要保持可编辑），直接在组件上重新写该属性即可，它会覆盖公共对象里的配置：

// 这个输入框会保持可编辑，其他属性复用公共配置
<Form.Control {...commonControlProps} readOnly={false} type="text" placeholder="可编辑输入框" />

方法二：封装自定义组件（更适合长期复用） #

如果你的项目里很多地方都需要用到带这些属性的Form.Control，直接封装一个自定义组件更方便，后续要修改公共属性只需要改这一个组件：

import { Form } from 'react-bootstrap';

// 自定义组件，把公共属性内置，同时接收外部传入的其他属性
const CustomFormControl = ({ editable, ...restProps }) => {
  return (
    <Form.Control
      size="sm"
      plaintext={!editable}
      readOnly={!editable}
      {...restProps} // 外部传入的属性会优先覆盖内置的公共属性
    />
  );
};

// 使用自定义组件
function YourComponent({ editable }) {
  return (
    <Form>
      <CustomFormControl editable={editable} type="text" placeholder="输入内容1" />
      <CustomFormControl editable={editable} type="email" placeholder="输入邮箱" />
      <CustomFormControl editable={editable} as="textarea" placeholder="输入描述" />
    </Form>
  );
}

两种方法都能解决你的问题，根据自己的使用场景选就行：简单场景用方法一，多处复用或需要长期维护用方法二。

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