Question

我正在开发多语言ReactJS应用程序，用于国际化我使用react-translate-component

我想在我的应用程序中显示国家/地区下拉列表，下面是我正在使用的代码

const Content = ({ }) => {
    const options = countryData.map((option, i) => (
       <option key={i} value={option}><Translate {...this.props} content={langKey} /></option>
    ));

    return (
        <select className="form-control" name="country" ref="country"  defaultValue={this.state.personData.countryCode} onChange={this.validateCountry} >
            <option value="empty-field">Country</option>
            {options}
        </select>
    );
};`

上面的代码可以工作，但它会在每个选项中创建一个额外的span标记。

我也发现在上一版本的反应中他们是span标签的问题，但我也使用最新版本的反应，即15.1.0

他们是最好的方法吗？

Answer 1

简短回答

将属性unsafe={true}添加到翻译组件：

<Translate {...this.props} content={langKey} unsafe={true} />

如果要插入用户的文本输入，请考虑此属性 不应使用 。

答案很长

我在一个不同的场景中遇到了同样的问题，我有一个带插值参数（max）的翻译条目。

翻译条目（在 en.json 中）：

"invalid-timespan": "Time span cannot be longer than %(max)s months.",

翻译组件实例化：

<Translate {...this.props} content='invalid-timespan' max='3' />

结果信息是：

Time span cannot be longer than
3
months.

我对react-translate-component和react-interpolate-component做了一些研究，发现了我认为是问题的原因。

以下代码是Interpolate组件的render方法的摘录。如您所见，当unsafe为真时，内容将连接为唯一字符串，而当unsafe为false时，内容被推送到数组，生成三个{ {1}}元素：

<span>

因此，如上所述添加if (unsafe) { var content = format.split(REGEXP).reduce(function(memo, match, index) { var html; ... memo += html; return memo; }, ''); props.dangerouslySetInnerHTML = { __html: content }; } else { format.split(REGEXP).reduce(function(memo, match, index) { var child; ... memo.push(child); return memo; }, children); }会产生唯一的unsafe={true}元素：

<span>

<强>注意事项：

如前所述，在插入用户的文本输入时不要使用Time span cannot be longer than 3 months.。
使用unsafe时，您需要提供插值。例如，由于缺少插值（unsafe）：
，以下代码将生成错误
max='3'

避免使用react-translate-component中的SPAN标记

1 个答案:

简短回答

答案很长