如何在React.js中基于HTML字符串生成绑定对象数据的邮件模板

你当前的问题是emailData用单引号定义，导致里面的模板占位符${person.name}无法被解析，以下几种方法可以帮你完成数据绑定：

方法1：用ES6模板字面量（最简便） #

把emailData的单引号换成反引号，模板占位符会自动解析对象属性：

const person = {
    name: 'Wes',
    job: 'Web Developer',
    city: 'Hamilton',
    bio: 'Wes is a really cool guy that loves to teach web development!'
}

const emailData = `<div class="person"><h2>${person.name}</h2><p class="location">${person.city}</p><p class="bio">${person.bio}</p></div>`;
// 输出就是你要的结果
console.log(emailData);

方法2：手动替换占位符（兼容旧环境） #

如果项目不支持ES6，就用replace方法逐个替换：

const person = {
    name: 'Wes',
    job: 'Web Developer',
    city: 'Hamilton',
    bio: 'Wes is a really cool guy that loves to teach web development!'
}

let emailData = '<div class="person"><h2>${person.name}</h2><p class="location">${person.city}</p><p class="bio">${person.bio}</p></div>';
emailData = emailData
    .replace('${person.name}', person.name)
    .replace('${person.city}', person.city)
    .replace('${person.bio}', person.bio);

console.log(emailData);

方法3：解构赋值简化写法 #

如果需要多次使用对象属性，先解构再写模板更简洁：

const person = {
    name: 'Wes',
    job: 'Web Developer',
    city: 'Hamilton',
    bio: 'Wes is a really cool guy that loves to teach web development!'
}

const { name, city, bio } = person;
const emailData = `<div class="person"><h2>${name}</h2><p class="location">${city}</p><p class="bio">${bio}</p></div>`;
console.log(emailData);

内容的提问来源于stack exchange，提问作者Sagar Mehta