我必须发送一些电子邮件,我只是想重用尽可能多的代码/知识(只是因为),为此,我想用内联类将React组件呈现为原始HTML。
我已通过以下方式将React组件渲染为静态标记:
const TestMail = () => {
return (
<div>
<h1 className="text-xl font-bold border-b">You have a new Test Email on Productlane</h1>
<p className="border-b">Something something</p>
<a href="https://productlane.io/feedback" className="bg-purple-600">
Open
</a>
</div>
)
}
export function testMailer({ to }: IParams) {
const emailHtml = ReactDOMServer.renderToStaticMarkup(<TestMail />)
const processedHtml = juice(emailHtml, {
webResources: {
// relativeTo: "app/core/styles/index.css",
},
})
return {
async send() {
console.warn("trying to SEND")
console.warn(processedHtml)
},
}
}
这将输出没有样式的原始html字符串,因此我认为我真的需要为内嵌程序传递已编译的css来完成它的工作
<div><h1 class="text-xl font-bold border-b">You have a new Test Email on Productlane</h1><p class="border-b">Something something</p><a href="https://productlane.io/feedback" class="bg-purple-600">Open</a></div>
从代码片段中可以看出,我尝试使用Juice内联样式,但是,我似乎可以在html中呈现类,知道如何实现吗?
1条答案
按热度按时间4uqofj5v1#
对,我一直在做一些挖掘,这是我处理电子邮件的计划。
{{ parameters }}
将它们保留在输出的HTML中,并在发送电子邮件之前通过Handlebars替换它们。选项1:
{ name: “David” }
。我在sendEmail()
函数中执行此操作。选项2
您还可以将自定义Juice脚本替换为this CLI tool或this npm package。您甚至可以选择使用Inky抽象HTML4表。
或者,如果您只希望部分电子邮件客户端支持,NextJS可以将CSS内联到头部,并使用此实验标记讨论here。要获得完全支持,您将需要样式属性中的CSS。
我有一个lambda函数
sendEmail(email: string, templateName: string, context: Record<unknown, any>)
,其中包含hub模板文件包。当发送电子邮件时,它会使用手柄compile()
处理上下文。