在 FormattedMessage 中使用 <wbr> 作为值（使用 TypeScript）

Question

我正在尝试在 <FormattedMessage id="some:message" /> 的消息中使用 optional word break tag <wbr>。

背景

有些 words/texts 对于移动屏幕上的某些父元素来说太大了，我们使用的是像布局这样的列，我们无法在移动环境中轻松替换它。

想法

喜欢{p: function p(textFrag: string) :JSX.Element { return (<p>{textFrag}</p>); }}：

我们可以使用 <FormattedMessage id="some:message" />,

{"some:message": "This is a very<wbr>very<wbr>long<wbr>word"} // as message

{wbr: function wbr() :JSX.Element { return (<wbr>); }}
// or
{wbr: function wbr() :JSX.Element { return (<React.Fragment><wbr></React.Fragment>); }}

但我得到的只是一个

JSX element 'React.Fragment' has no corresponding closing tag.ts(17008)

后一个例子和两条错误信息：

JSX element 'wbr' has no corresponding closing tag.ts(17008)
// plus
Unexpected token. Did you mean `{'}'}` or `&rbrace;`?ts(1381)

前者。

备选

是否有其他可选的分词符？或者 <FormattedMessage> 和 ReactIntl?

的任何解决方案

Answer 1

JSX 规范与 HTML 有点不同。在 JSX 中，你需要使用这样的自闭标签：

<wbr />

这在 HTML 中有效，但在 JSX 中无效：

<wbr>

在 FormattedMessage 中使用 <wbr> 作为值（使用 TypeScript）

Use <wbr> in FormattedMessage as value (with TypeScript)

html

reactjs

typescript

react-intl

背景

想法

备选