React Dropzone项目构建时'Prop spreading is forbidden'警告的解决方法

这个警告是ESLint的react/jsx-props-no-spreading规则触发的，它的设计初衷是让代码更清晰，避免隐式传递大量props。这里咱们有两种靠谱的解决方式，选哪个看你的需求：

方法1：显式解构并传递props #

最符合规则的做法是把getRootProps和getInputProps返回的props解构出来，逐个传递给对应的元素。这样能明确看到每个元素接收了哪些属性，可读性更强。

修改后的代码示例：

const dropzoneRef = createRef();
const openDialog = () => {
  if (dropzoneRef.current) {
    dropzoneRef.current.open()
  }
};

<Dropzone ref={dropzoneRef} noClick noKeyboard>
  {({getRootProps, getInputProps, acceptedFiles}) => {
    // 先获取并自定义root的props
    const rootProps = getRootProps({className: 'dropzone'});
    // 获取input的props
    const inputProps = getInputProps();
    
    return (
      <div className="container">
        {/* 显式传递拖拽相关的props */}
        <div 
          className={rootProps.className}
          onDragEnter={rootProps.onDragEnter}
          onDragOver={rootProps.onDragOver}
          onDragLeave={rootProps.onDragLeave}
          onDrop={rootProps.onDrop}
        >
          {/* 如果input的props太多，也可以针对性忽略规则，或者同样显式传递 */}
          <input 
            ref={inputProps.ref}
            type={inputProps.type}
            onChange={inputProps.onChange}
            // 或者用下面这种方式，同时禁用该行警告
            // {...inputProps} // eslint-disable-next-line react/jsx-props-no-spreading
          />
          <p>Drag 'n' drop some files here</p>
          <button type="button" onClick={openDialog} >
            Open File Dialog
          </button>
        </div>
        <aside>
          <h4>Files</h4>
          <ul>
            {acceptedFiles.map(file => (
              <li key={file.path}>
                {file.path} - {file.size} bytes
              </li>
            ))}
          </ul>
        </aside>
      </div>
    );
  }}
</Dropzone>

方法2：调整ESLint规则（针对性禁用） #

如果觉得显式传递太繁琐，也可以在不破坏整体规则的前提下，允许特定场景使用props spreading：

选项A：单行禁用警告 #

在出现警告的行上方添加注释，只禁用该行的规则：

<div {...getRootProps({className: 'dropzone'})} // eslint-disable-next-line react/jsx-props-no-spreading >
<input {...getInputProps()} // eslint-disable-next-line react/jsx-props-no-spreading />

选项B：文件级禁用 #

如果整个文件都需要使用props spreading，可以在文件顶部添加注释：

/* eslint-disable react/jsx-props-no-spreading */

选项C：全局规则配置 #

在项目的ESLint配置文件（比如.eslintrc.js）中，修改规则允许特定标签使用props spreading：

module.exports = {
  // 其他配置项...
  rules: {
    'react/jsx-props-no-spreading': ['warn', {
      // 允许对div和input标签使用props spreading
      exceptions: ['div', 'input']
    }]
  }
};

两种方法各有优劣：显式解构更符合代码规范，可读性更高；禁用规则更快捷，但要注意不要滥用，避免让代码变得模糊。

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