javascript - 正确避免将无效属性传递给 React 原语

Question

我经常发现自己需要让组件接受任何有效的 HTML 属性以使底层 HTML 元素使用它们。

class Input extends React.Component {
  // Here I use one of the `props` to add logic to
  // my component
  onChange = () => alert(this.props.alert);

  render() {
    // Here I want to pass all the properties
    // down to the HTML input element
    return <input onChange={this.onChange} {...this.props} />
  }
}

我上面的示例将引发警告，因为 React 提示 alert 属性不是 input 的有效属性。

我通常按如下方式解决问题:

class Input extends React.Component {
  // Here I use one of the `props` to add logic to
  // my component
  onChange = () => alert(this.props.alert);

  render() {
    const {
      alert, // eslint-disable-line no-unused-vars
      ...props
    } = this.props;

    // Here I want to pass all the properties
    // down to the HTML input element
    return <input onChange={this.onChange} {...props} />
  }
}

现在组件可以正常工作，但我对最终结果不满意。

我理解为什么 React 不允许将未知属性传递给它的原语，因为它们不会使用它们，并且提供无用的属性是不干净的，这些属性将来可能会成为有效的 HTML 属性或导致不当行为或副作用效果。
但我不明白 React 建议如何处理这个(相当常见)用例。

有什么建议的方法可以干净地处理这种情况吗？

Answer 1

除了我所见过的大部分方法(但我只看到了几家商店的风格)之外，我想到的另外两种方法是:

1. 单独提供一般属性:

   <Input alert={...} general={{className: "foo"}} />
   

   然后

   return <input onChange={this.onChange} {...this.props.general} />;
   

   对此我要说的是:Blech。使用 Input 的地方很繁重，写得不好......

2. 给自己一个实用函数，你可以用它来复制一个对象，而不保留某些属性，就像 Underscore/Lodash 的 _.omit 一样。 :

   const objectExcept(obj, ...except) {
       const result = {};
       Object.keys(obj).forEach(key => {
           if (!except.includes(key)) {
               result[key] = obj[key];
           }
       });
       return result;
   };
   

   然后

   return <input onChange={this.onChange} {...objectExcept(this.props, "alert")} />;
   

   那个版本的objectExcept采用离散参数，但你可以让它接受一个数组、一个分隔字符串，任何适合你的东西......