Material UI ChipInput组件hintText属性失效问题求助

这个警告我之前也碰到过，其实原因很简单——React 会严格检查传递给原生DOM元素的属性，而hintText并不是标准的输入框DOM属性，所以它就抛出了这个提示。下面分两种情况给你解决方案：

情况1：使用第三方UI库的ChipInput组件（比如Material-UI） #

绝大多数UI库的输入类组件，提示文本都是用placeholder属性，而非hintText。你只需要把属性名改成placeholder即可：

<div className={classes.headline}>
  <ChipInput placeholder='Type anything' onChange={this.handleTagChange} />
</div>

情况2：ChipInput是你自己封装的自定义组件 #

如果这个组件是你自己写的，问题出在你把hintText直接传递给了底层的原生<input>元素。解决方法是在组件内部解构出hintText，转换成合法的placeholder属性后再使用，剩下的属性再传递给DOM元素：

// 自定义ChipInput组件示例
const ChipInput = ({ hintText, ...props }) => {
  // 将hintText转为placeholder传给内部输入框
  return (
    <div className="chip-input-wrapper">
      <input placeholder={hintText} {...props} />
      {/* 这里放你的Chip相关渲染逻辑 */}
    </div>
  );
};

这样React就不会把不被识别的hintText属性传到原生DOM元素上，警告也就消失了。

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