如何在ReactJS中复用属性列表并注入到元素中？

你完全不用重复编写属性列表——React的**对象展开运算符（...）**就是专门解决这类属性复用问题的，安全又符合React的设计规范，完全没必要用dangerouslySetInnerHTML。

核心思路 #

把所有通用的输入属性（比如onChange、onBlur、className这些）统一放在一个对象里，然后在渲染不同类型的输入组件时，用...运算符把这个对象里的属性“展开”注入进去，再针对textarea、number这类特殊类型补充专属属性就行。

完整示例代码 #

下面是一个可复用的编辑组件实现，支持多种输入类型：

import { useState } from 'react';

const EditableText = ({ initialValue = '', inputType = 'text' }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [currentValue, setCurrentValue] = useState(initialValue);

  // 定义所有通用属性
  const commonProps = {
    className: 'editable-input',
    value: currentValue,
    onChange: (e) => setCurrentValue(e.target.value),
    onBlur: () => setIsEditing(false),
  };

  return (
    <div className="editable-container" onClick={() => setIsEditing(true)}>
      {isEditing ? (
        inputType === 'textarea' ? (
          // 渲染textarea，展开通用属性+补充专属属性
          <textarea
            {...commonProps}
            rows={3}
            autoFocus
          />
        ) : (
          // 渲染input，根据类型注入type属性+特殊属性
          <input
            {...commonProps}
            type={inputType}
            autoFocus
            // 针对number类型补充min/max（可根据需求调整）
            {...(inputType === 'number' ? { min: 0, step: 1 } : {})}
          />
        )
      ) : (
        // 非编辑状态显示文本
        <span className="editable-text">{currentValue || '点击编辑'}</span>
      )}
    </div>
  );
};

// 使用示例
const App = () => {
  return (
    <div>
      <EditableText initialValue="普通文本" inputType="text" />
      <EditableText initialValue="123" inputType="number" />
      <EditableText initialValue="2024-05-20" inputType="date" />
      <EditableText initialValue="多行文本示例" inputType="textarea" />
    </div>
  );
};

export default App;

关键细节说明 #

1. 通用属性复用：commonProps里放所有输入组件共享的属性，一次定义，多处复用，避免重复代码。
2. 类型差异化处理：通过条件渲染区分textarea和普通input，再用条件展开（{...(条件 ? {属性} : {})}）给特定类型补充专属属性。
3. 安全可靠：这种方式完全遵循React的属性传递机制，比dangerouslySetInnerHTML安全得多，后者是用来处理原始HTML字符串的，根本不适合这个场景。

如果你需要更复杂的逻辑（比如自定义验证、防抖），还可以把commonProps里的方法抽成独立函数，或者封装成自定义Hook进一步复用逻辑。

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