Redux Form验证符号未在浏览器中呈现



如果您访问此网站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操作系统。然而,对于我的一位同事来说,感叹号渲染正确,他使用的是Windows。你知道是什么原因造成的吗?如何解决?提前谢谢。

看起来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文档网站上有效,因为它们在文档的头标签中包含了一个链接,该链接从上面的片段中的同一CDN加载了令人敬畏的字体。

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

相关内容

最新更新