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

问题描述

如果您访问此网站https://redux-form.com/7.2.0/examples/fieldlevelvalidation/，则显示如果该字段为空，则会显示带有感叹号的“必填”错误消息：错误消息图片

这是我的 .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 中对其进行了测试。这发生在我的电脑和一些同事的电脑上，我们都使用 Mac OS。但是，对于我的一位同事，感叹号正确呈现，他使用的是 Windows。知道是什么原因造成的以及如何解决吗？提前致谢。

标签： reactjsreact-reduxredux-form

看起来 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 标签中包含了一个链接，该链接从上面那个片段中的同一个 CDN 加载了很棒的字体。

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

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

问题描述

解决方案

推荐阅读