reactjs - 如何在 React 0.14 中的选项标签内使用 FormattedMessage？

Question

我正在尝试将我的应用程序从 React 0.12 迁移到 React 0.14，但在使用 react-intl 的选项元素时遇到问题FormattedMessage 对象放置在选择标签内。

这是一个示例 JSX 代码:

<select>
<option value="value1"><FormattedMessage message={this.getIntlMessage('key1')}/></option>
<option value="value2"><FormattedMessage message={this.getIntlMessage('key2')}/></option>
</select>

此代码在 React 0.12 中运行良好，我看到了翻译后的选项元素。

在react 0.14中，我得到了这个错误:

Only strings and numbers are supported as <option> children.

我追踪了今年早些时候发生的 React 变更集的消息:

https://github.com/facebook/react/pull/3847/files

如何解决这个问题？我不可能是唯一一个尝试使用国际化选项元素的人吧？

Answer 1

这一直是个问题。 React < 0.14 用于默默地接受无效的 DOM 结构，在你的情况下 <span>里面的元素 <option>元素。然后浏览器会纠正 DOM 结构，并导致 React 管理的虚拟 DOM 与真实的 DOM 不同步。在尝试重新渲染现有组件而不是仅仅重新安装它们之前，您不会看到错误。

react-intl V2.0.0 将支持 React 0.14，允许您使用 Function-As-Child 模式来自定义 Formatted* 的方式组件渲染。请参阅 this issue 上的“作为 child 的支持功能”段落.

就您而言，您会这样做:

<FormattedMessage message={this.getIntlMessage('key1')}>
  {(message) => <option value="value1">{message}</option>}
</FormattedMessage>
<FormattedMessage message={this.getIntlMessage('key2')}>
  {(message) => <option value="value2">{message}</option>}
</FormattedMessage>

我认为在当前的稳定版本 1.2.1 上没有办法实现这一点。