开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将RectIntl格式的消息添加为html属性

问如何将RectIntl格式的消息添加为html属性
EN

Stack Overflow用户

提问于 2020-10-01 00:28:18

回答 2查看 1.3K关注 0票数 1

我有一个标题徽标图像，其alt和标题属性应从i18n消息呈现。

message_en.json

{
    "logoTitle": "Link open in new tab or window",
    "logoAlt": "some description goes here.." 
}

header.js

import { FormattedMessage } from 'react-intl/dist';

<a
  href={url}
  title={<FormattedMessage id="logoTitle"/>}
> 
  <img
      src={src}
      alt={<FormattedMessage id='logoAlt' />}
  />
</a>

在浏览器中，alt和title呈现为对象

<a title="[object Object]">
    <img id="masthead__logo__img" src="../assets/images/logo.png" alt="[object Object]">
</a>

在这种情况下，如何呈现FormattedMessage？

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-10-01 00:32:53

FormattedMessage是一个呈现超文本标记语言的React组件。要呈现普通字符串，请改用intl.formatMessage函数：

title={intl.formatMessage({ id: 'logoTitle' })}

票数 1

EN

Stack Overflow用户

发布于 2020-10-01 00:46:30

潜在的解决方案

使用useIntl挂钩呈现一个普通字符串。

import { useIntl } from 'react-intl'; 

const intl = useIntl(); // place this within your function / class.

<a
  href={url}
  title={intl.formatMessage({ id: 'logoTitle' })} />}
> 
  <img
      src={src}
      alt={intl.formatMessage({ id: 'logoAlt' })} />}
  />
</a>

调试

您可以在属性外部执行console.log(intl.formatMessage({ id: 'logoTitle' });，以查看为该标识符提取的值是什么。

票数 0

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64147538

复制

相关文章

如何将WordPress固定链接格式修改为.html结尾

html php wordpress 网站建设网站

之前一直采用自定义结构 http://www.xiaohulizyw.cn/%category%/%postname%/ 的URL结构形式，为了优化URL结构，特意将其修改为 http://www.xiaohulizyw.cn/%category%/%postname%.html，即以.html结尾，具体见上图。

小狐狸说事

2022/11/17

1.2K0

如何将WordPress固定链接格式修改为.html结尾

如何将ipynb转换为html，md，pdf等格式

html ubuntu linux markdown 开源

本文介绍了如何将 Jupyter Notebook（.ipynb 文件）转换为 HTML、Markdown、PDF 和 LaTeX 格式。首先介绍了 Jupyter Notebook 的入门知识，然后介绍了将 Jupyter Notebook 转换为其他格式的方法，包括使用 `jupyter nbconvert` 命令和设置 Jupyter Notebook 模板。此外，还提供了将 Jupyter Notebook 转换为 PDF 和 LaTeX 格式的方法，以及使用 ipython 命令行工具直接将 Jupyter Notebook 转换为 PDF 格式的方法。

红色石头

2017/12/28

8.3K0

如何将ipynb转换为html，md，pdf等格式

html5学习篇：03特殊格式和属性

一：特殊的格式既有意思，又有表现 1.address 地址 2.blockquote 大引用（块） 3.q 小引用（行内） 4.pre 代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <address> <blockquote> rm 401 ckp west wing 玉泉 camps<br /

IT工作者

2022/03/02

4280

如何将html格式动态图表网页嵌入ppt中

前几天魔方学院（其实就是我的公众号交流群啦~_~）的一位群友突然在群里提了一个问题！看了之前推送的REmap相关内容，结果导出的图表是html格式的动态图，不知道如何将此种格式的图表放在ppt中使用。这确实很尴尬他呀，你不能直接拿着Rstudio跟客户演示呀（而且还不保证每一台PC上都安装有R语言软件），如果是ppt展示，突然退出来，然后用浏览器打开html文件也是够突兀的。当然这个情况在r语言中其实很普遍，很多依赖底层js语言编写的二次开发包（比如R语言中的recharts、RERmap、Rchar

数据小磨坊

2018/04/11

34K2

如何将html格式动态图表网页嵌入ppt中

提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'

用户8442333

2021/08/21

1.9K0

<a href="http://www.runoob.com">这是一个链接</a>

用户6884826

2021/07/07

1.9K0

【HTML5】HTML5 多媒体标签 ② ( 视频标签＜video＞ | 视频标签常见属性 | autoplay 属性 | controls 属性 | poster 属性 | 设置多个格式视频 )

html5 浏览器视频音频语法

HTML 5 的 <video> 视频标签 , 支持 ogg / mpeg 4 ( mp4 ) / webM 三种格式的音频 , 不同的浏览器支持的音频格式不同 ;

韩曙亮

2023/04/24

3K0

【HTML5】HTML5 多媒体标签 ② ( 视频标签＜video＞ | 视频标签常见属性 | autoplay 属性 | controls 属性 | poster 属性 | 设置多个格式视频 )

HTML a 标签的 download 属性

html download 百度后台浏览器

直接点击这个超链接一般浏览器会直接在窗口中打开这张图片（我这里是加了插件，所以是在图片灯箱中显示的）

用户8099761

2023/05/10

1.8K0

html 的scor属性,scrollheight属性「建议收藏」

编程算法 css https java javascript

html设置 overflow-x: scroll;属性后怎么让指定位如果页面不够长(至少窗口长度两倍)，那肯定滚动不到一半的位置。否则任何浏览器都不会产生误差。下面的例子输出 100 个，页面加载的时候会滚动到第 51 个。window.onload = function() { // 测试：100 个足够使 scroll 长度大于 window 长

全栈程序员站长

2022/09/15

1.7K0

html 的scor属性,scrollheight属性「建议收藏」

html的data-*属性

html data location onclick var

参考： http://www.w3school.com.cn/tags/att_global_data.asp

周杰伦本人

2023/10/12

1440

HTML DOM 属性

可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。

陈不成i

2021/07/21

2.3K0

HTML <input> 标签的 autocomplete 属性

自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

王小婷

2021/06/10

2.7K0

HTML <input> 标签的 autocomplete 属性

HTML <form> 标签的 enctype 属性

编程算法 php

默认地，表单数据会编码为 "application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。

大道七哥

2019/09/10

2K0

【前端】HTML属性

属性规定元素的行内样式属性将覆盖任何全局的样式设定，例如在 <style> 标签或在外部样式表中规定的样式。

Gavin-ZYX

2019/03/04

3.1K0

【HTML5】HTML5 新增 input 表单属性 ( required 属性 | placeholder 属性 | autofocus 属性 | autocomplete 属性 )

html5 autocomplete 表单浏览器搜索

required 属性 : 属性值为 required , 一旦设置了该属性 , 则表单的内容就是必填项 , 不能为空 ;

韩曙亮

2023/04/24

3.2K0

【HTML5】HTML5 新增 input 表单属性 ( required 属性 | placeholder 属性 | autofocus 属性 | autocomplete 属性 )

02.HTML元素/属性/标题/段落/文本格式化/链接

02.HTML元素/属性/标题/段落 /文本格式化/链接 HTML 元素 ---- HTML 文档由 HTML 元素定义。 ---- HTML 元素开始标签 *元素内容结束标签 *<p>这是一个段落</p><a href="default.htm">这是一个链接</a><br> *开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。 ---- HTML 元素语法 HTML 元素以开始标签起始 HTML 元素以结束标签终止元素的内容是开始标签与结束标签

Java帮帮

2018/03/15

4K0

02.HTML元素/属性/标题/段落/文本格式化/链接

【HTML】HTML 标签 ③ ( 文本格式化标签 | 加粗 | 斜体 | 下划线 | 删除线 | 标签属性 | 图像标签 | 图像标签属性 )

html 图像标签配置语法字符串

在网页中插入图片 , 使用 <img> 标签 , 该标签是单标签 , 插入语法如下 :

韩曙亮

2023/03/30

3.1K0

【HTML】HTML 标签 ③ ( 文本格式化标签 | 加粗 | 斜体 | 下划线 | 删除线 | 标签属性 | 图像标签 | 图像标签属性 )

WCF 消息帧格式

在TCP/IP协议栈中，当数据通过协议栈向下流动时，每一层都要给数据增加控制信息用于确保正确的传递。控制信息放置在被传送数据的开始，称之为包头，这种在协议栈中每一层都增加传递信息的过程称为封装。也就是说，栈中每层软件对传递的数据都要进行格式化，使之与特定的协议相适应，即每层都在上层的基础上加一个与协议相对应的包头；而当数据在协议栈中反方向（由底层向上）流动时，协议软件就以相反的方式处理数据，即每一层都剥去栈中对应层增加的包头，然后将数据传递给上一层，这就是拆封。数据是网络和TCP/IP协议栈传输的实体和服

张善友

2018/01/19

6430

Html中table的属性总结

border= “1”：给整个表格（包括表格及每一个单元格）加上1像素的黑色边框，其等同于css中的： table,table tr th, table tr td { border:1px solid #0094ff; }

用户2323866

2021/06/24

1.8K0

HTML页面中的lang属性

lang属性的取值应该遵循 CP 47 - Tags for Identifying Languages

李郑

2018/03/01

3.3K0

相似问题

CSS内容属性:如何将其添加为html样式属性？

12

熊猫添缺行

10

如何将Vue组件添加为HTML标记

11

如何将对象添加为JsonObject对象的属性？

10

如何将XSD和XSI添加为属性

10

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例