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

Question

我有一个标头徽标图像，应该从i18n消息中呈现alt和title属性。

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呈现为[Object] [Object]

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

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

Answer 1

FormattedMessage是一个呈现HTML的React组件。要呈现纯字符串，请改用intl.formatMessage函数：

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

Answer 2

潜在解决方案

使用import networkx as nx import osmnx as ox ox.config(use_cache=True) # get a graph, origin/destination nodes, and edge weight attribute G = ox.graph_from_point((40.754830, -73.984049), network_type='drive') orig = list(G)[10] dest = list(G)[-10] w = 'length' # incorrect solution in other answer: route goes the wrong way down a one-way street route1 = nx.shortest_path(nx.compose(G, G.reverse(copy=False)), orig, dest, weight='length') # correct solution: finds the shortest trip in either direction while obeying one-ways if nx.shortest_path_length(G, orig, dest, w) <= nx.shortest_path_length(G, dest, orig, w): route2 = nx.shortest_path(G, orig, dest, w) else: route2 = nx.shortest_path(G, dest, orig, w) print(route1 == route2) #False # plot both routes to show how route1 goes the wrong way down a one-way Gu = ox.get_undirected(G) fig, ax = ox.plot_graph_routes(Gu, [route1, route2], ['c', 'y']) 钩子渲染纯字符串。

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> 来查看正在为该标识符获取的值。