React JSX 中的 FontAwesome

Question

我正在尝试在 react 中插入字体很棒的图标，我想将输入的占位符设置为搜索图标

const Search = () => {
  return (
    <>
      <div className="Search">
        <form className="Search__form">
          <img src="" />
          <input
            type="text"
            placeholder="&#xF002; Search"
            style="font-family:Arial, FontAwesome"
          ></input>

          <button>Search</button>
        </form>
      </div>
    </>
  );
};

我收到了这个错误

错误：style 属性需要从样式属性到值的映射，而不是字符串。例如，使用 JSX 时 style={{marginRight: spacing + 'em'}}。

Answer 1

这是因为 JSX 不是 HTML，在 JSX 中您必须将样式作为对象传递，并且要使用 javascript，我们必须先在 {} 中放入 {}，然后将您的样式放入对象中，但是样式键应该是驼峰式

例如：

• 背景颜色：绿色 => 背景颜色：“绿色”

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

          <button>Search</button>
        </form>
      </div>
    </>
  );
};