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

Question

I am receiving data from an api call similar to this.

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>',
  },
};

I am trying to replace the string literals before displaying in react. Is there a simplistic way to do this similar to react-intl FormattedMessage?

In react-intl I think you could do something like this if the $ weren't present

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

Try this:

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