[React Intl] Use a react-intl Higher Order Component to format messages
2024-08-24 23:56:14
In some cases, you might need to pass a string from your intl messages.js
file as a prop to a component. Instead of using react-intl
components (which generate markup), we’ll use the injectIntl
higher order component provided by react-intl
. This will provide just the string we’re looking for, make the prop simpler, and avoid creating unnecessary DOM elements.
We’ll also use props passed to the component from the Higher Order Component to clean up some redundant code.
import React from 'react';
import { injectIntl, FormattedMessage, FormattedHTMLMessage, FormattedRelative , FormattedTime, FormattedNumber } from 'react-intl';
import {meanBy, round, sortBy} from 'lodash'; import books from '../books.json'; const BookDetail = ({match, intl}) => { return (
<div className="BookDetail">
....
<textarea placeholder={intl.formatMessage({
id: 'detail.inputPlaceholder'
})} cols="30" rows="10"></textarea>
</div>
)
} export default injectIntl(BookDetail);
最新文章
- C#微信公众号接口开发实例-高级接口-申请带参数的二维码
- 1.4 Service
- Excel文件导入SQL Server数据库表
- HDU 1728 逃离迷宫
- QVW中实现日期区间的选择功能!
- Android仿微信SlideView聊天列表滑动删除效果
- 05 Android强制设置横屏或竖屏/全屏
- (一一三)使用系统自带框架操作SQLite3数据库
- Aliyun上Linux服务器挂载数据盘及速度测试
- 【朝花夕拾】四大组件之(一)Broadcast篇
- Do-Now—团队冲刺博客三
- 校园服务nabcd需求分析
- php类自动加载
- proc/net/dev实时网速统计实例【转】
- 新建一个self hosted Owin+ SignalR Project(1)
- mysql 数据库操作 数据库的增删改查
- nginx命令行参数
- Serializers序列化组件
- 数据库批量操作中SqlParameter参数传递的问题
- Facebook人工智能实验室的前世今生