Redux 表单验证符号不在浏览器中呈现？

Question

如果你访问这个网站 https://redux-form.com/7.2.0/examples/fieldlevelvalidation/，它显示如果该字段为空，则会显示带有感叹号的 "Required" 错误消息： error message image

这是我的 .tsx 文件中的字段代码：

<Field component={renderField} type="text" id="jobid" name="jobids"
    placeholder="enter id"
    validate={[FormValidation.required, FormValidation.jobids]}/>

这些是我的 .ts 文件中的相关导出函数：

export class FormValidation {
        public static required = (value: string) => value ? undefined : 'Required';
}

但是，对于我的项目，出现了一个错误方块而不是感叹号。我已经在 Chrome、Firefox 和 Safari 中对其进行了测试。我的电脑和一些同事的电脑都会出现这种情况，我们都用MacOS。但是，对于我的一位同事来说，感叹号正确呈现，他使用 Windows。知道是什么原因造成的以及如何解决吗？提前致谢。

Answer 1

看起来 FontAwesome 没有加载，所以图标没有出现，因为它不知道如何呈现该字形。

据我所知，FontAwesome 不是 redux 形式的依赖项，因此您必须尝试将它手动包含在您的项目中的某个地方，例如 index.html ，如下所示：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />

它在 Redux Form 文档网站上有效，因为他们在文档的 head 标签中包含了一个 link，它从上面代码段中的同一个 CDN 加载了很棒的字体。

至于为什么它会出现在您同事的 windows 机器上，我真的不确定。我想如果他在本地安装了 FontAwesome 作为字体，它可能会使用它并能够正确呈现字形。

Redux 表单验证符号不在浏览器中呈现？

Redux Form validation symbol does not render in browser?

reactjs

react-redux

redux-form