Reactstrap 4 Input用变量传FontAwesome unicode占位符异常

这个表现和reactstrap组件无关，属于JSX的编译机制特性：

• 静态写在JSX标签属性里的字符串包含这类HTML实体时，JSX编译阶段会自动将实体解码为对应的Unicode字符，最终传给DOM的placeholder属性是解析完成的正确字符，因此配合FontAwesome字体可以正常渲染图标。
• 通过prop、变量动态传入的字符串属于运行时纯文本，不会经过JSX的静态编译解码流程，DOM拿到的是这类字面量文本，自然无法识别为图标字符，只会原样显示。

不要在动态传入的字符串里使用HTML实体，直接在JS字符串中使用Unicode转义序列书写图标和特殊空格即可：

• FontAwesome搜索图标对应的JS转义写法为\uf002
• 不换行空格 对应的JS转义写法为\u00a0

修正后的defaultProps配置如下：

AlbumsFilter.defaultProps = {
  placeholderText: "\uf002\u00a0\u00a0Search by Album Title or ID"
};

组件传参部分不需要额外修改，保持原有写法即可：

<Input
  style={{ fontFamily: 'FontAwesome, sans-serif' }}
  placeholder={props.placeholderText}
/>

注意：如果需要动态拼接其他文本，直接在字符串模板或拼接逻辑里保留上述Unicode转义写法即可，不需要额外调用String()、toString()这类转换方法，这类方法不会处理HTML实体解码。

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