React 组件，或从存储的数据中替换字符串文字的策略，类似于 react-intl

Question

我正在从与此类似的 api 调用接收数据。

simplified_response: {
variables:{
name: 'John',
age: '25',
gender: 'male',
},
strings:[
'<p>Hello ${name}</p>',
'<p>${name},<br/> I understand you are ${age} years old</p>',
'<p>${name},<br/> I understand you are ${gender}</p>',
},
};

我正在尝试在 react 中显示之前替换字符串文字。有没有一种类似于react-intl FormattedMessage的简单方法？

在 react-intl 中，我认为如果$不存在，您可以做这样的事情

import React from 'react';
import R from 'ramda';
import { FormattedHTMLMessage } from 'react-intl';
export const print = (props) => {
return (
<div>
{ R.map((string) => (
<FormattedHTMLMessage
defaultMessage={ string }
values={ props.response.variables }
/>
), props.response.strings) }
</div>
);
};
Expandable.propTypes = {
response: PropTypes.obj,
};

Answer 1

试试这个：

let { variables, strings } = simplified_response
for (let [key, value] of Object.entries(variables)) {
strings = strings.map(string => string.replace('${' + key + '}', value))
}
simplified_response.strings = strings