[React Intl] Render Content with Placeholders using react-intl FormattedMessage
React with Using content render
2023-09-14 08:59:18 时间
Learn how to use react-intl
to set dynamic values into your language messages. We’ll also learn how to pass in those values by using a values
prop in the react-intl
FormattedMessage
component.
We'll also take a look at how to pass values with markup and still get all the benefits of translation.
Pass the 'values' porp to the FormattedMessage:
<h3> <FormattedMessage id="detail.author" values={{ author: book.author }} /> </h3>
For translations:
'en-US': {
detail: {
author: 'by {author}'
}
},
It also supports pass in markdown as param:
<p> <FormattedMessage id="detail.userRating" values={{ name: <strong>{review.name}</strong>, rating: review.rating }}/><br /> {new Date(review.date).toLocaleDateString()} </p>
'en-US': {
detail: {
userRating: '{name} rated it: {rating} out of 5'
}
},
相关文章
- [React] Performance issue - 01 useState with slow function call
- [React] Cleaning up Functional Components with Custom Hooks
- [React] Use react styled system with styled components
- [React Testing] Test react-router-dom Router Provider with createMemoryHistory
- [PWA] Cache JSON Data in a React PWA with Workbox, and Display it while Offline
- [React] Build a slide deck with mdx-deck using Markdown + React
- [React] Update Application State with React Apollo ApolloConsumer Component
- [React] Cleanly Map Over A Stateless Functional Component with a Higher Order Component
- [Redux] Navigating with React Router <Link>
- [Redux] Generating Containers with connect() from React Redux (FooterLink)
- [Redux] Passing the Store Down with <Provider> from React Redux
- [React Testing] Test your Custom Hook Module with react-hooks-testing-library
- [React Testing] Mock react-transition-group in React Component Tests with jest.mock
- [React Testing] Assert That Something is NOT Rendered with React Testing Library (with rerender & query)
- [React] Use React.memo with a Function Component to get PureComponent Behavior
- [React Router] Prevent Navigation with the React Router Prompt Component
- [Recompose] Create Stream Behaviors to Push Props in React Components with mapPropsStream
- [React Intl] Use a react-intl Higher Order Component to format messages
- [React Intl] Format a Date Relative to the Current Date Using react-intl FormattedRelative
- [React Intl] Render Content with Markup Using react-intl FormattedHTMLMessage
- [React] Break up components into smaller pieces using Functional Components
- react面试题-setState可能是异步更新(是同步还是异步)?