React JSX中使用FontAwesome设置input搜索图标占位符报错如何解决

核心错误原因 #

你遇到的报错是因为React中style属性的使用规则和原生HTML不同，同时placeholder中的HTML实体编码在JSX中无法直接解析，按如下步骤修改即可：

1. 修正style属性写法 #

React的style属性不接受字符串格式的样式，必须传入驼峰命名的JS对象，外层需要额外加一对大括号表示是JSX表达式：
原写法：

style="font-family:Arial, FontAwesome"

修改为：

style={{fontFamily: 'Arial, FontAwesome'}}

2. 修正placeholder中的图标编码 #

HTML实体在JSX的属性字符串中不会自动转义，需要替换为JS的Unicode转义格式\uf002：
原写法：

placeholder=" Search"

修改为：

placeholder="\uf002 Search"

修改后完整代码 #

const Search = () => {
  return (
    <>
      <div className="Search">
        <form className="Search__form">
          <img src="" />
          <input
            type="text"
            placeholder="\uf002 Search"
            style={{fontFamily: 'Arial, FontAwesome'}}
          />
          <button>Search</button>
        </form>
      </div>
    </>
  );
};

补充注意事项 #

• 确保项目已经正确引入对应版本的FontAwesome字体资源，否则图标无法正常显示
• 如果你使用的是FontAwesome 6及以上免费版本，需要调整字体配置适配新版本规则：

style={{
  fontFamily: 'Arial, "Font Awesome 6 Free"',
  fontWeight: 900
}}

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