0

我正在尝试使用 MJML 电子邮件库在 React 中创建电子邮件。它跑掉了反应，我已经全部工作了，但我需要渲染 2 个部分而不是 1 个。当我渲染 1 时，它不会正确显示在网页上，因为我需要它们的大小不同。

当我尝试将元素包装在数组中时，返回变为空，取出其中一个部分并返回。

任何帮助将不胜感激，这是代码。

render() {
    const { mjAttribute } = this.props
    const content = [this.renderEmailOverhead()]
    const innerContent = [this.renderEmailBanner(), this.renderEmailTitle(), this.renderEmailText(), this.renderEmailDivider]

    return ([
        <Section full-width='full-width' padding-top="0">
            { content }
        </Section>,
        <Section>
            { innerContent }
        </Section>
    ])
}
4

2 回答 2

1

那么，render一个组件的方法只能返回一个元素。所以你必须div像 Zargold 提到的那样把它包起来。

请注意，MJML 组件不仅仅是一个标准的 React 组件。

它有一些在 React 上下文中不可用的内部逻辑。IMO，您应该将 MJML 生成为标准 HTML 元素并使用 a然后将其作为字符串renderToStaticMarkup传递给函数，mjml 将编译mjml2html

 return (
   <mjml>
     <mj-body>
       <mj-container>
         ... // your sections goes here
       </mj-container>
     </mj-body>
   </mjml>
 )

请注意，我不认为 React 最适合这种工作，我建议您使用更适合的模板语言，例如 mustache/handlebars。

于 2017-05-11T19:16:36.187 回答
0

你不能像这样使用穿插 JavaScript 的 JSX……你可以这样做（你必须只有一个父/根元素）。

<div>
<Section full-width='full-width' padding-top="0">
    { content }
</Section>
<Section>
    { innerContent }
</Section>
</div>

或者，如果您出于某种原因坚持使用数组，则可以：

renderSection(content, fullWidth){
return (
  <Section
    full-width={fullWidth ? 'full-width' : false}
    style={{paddingTop: fullWidth ? 0 : 'auto'}}
  >
  {content}
  </Section>
)
}
render(){
 let contents = [content, innerContent]
return(
    <div>
    {contents.map(section, i => renderSection(section, i % 2 === 0))
    </div>
)
于 2017-05-11T19:04:07.120 回答