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 我们必须先放一个 {} 然后在里面{} 将您的样式放在对象中，但样式键应采用驼峰式

例如：

背景颜色：绿色 => 背景颜色：'green'

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>
    </>
  );
};

React JSX 中的 FontAwesome

FontAwesome inside React JSX

javascript

font-awesome

reactjs