javascript - react JS |渲染多个元素

Question

我正在尝试使用 MJML 电子邮件库在 React 中创建电子邮件。它运行了 react ，我已经一切正常，但我需要渲染 2 个部分而不是 1 个。当我渲染 1 时，它没有正确显示在网页上，因为我需要它们具有不同的大小。

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

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

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>
    ])
}

Answer 1

嗯，组件的render方法只能返回一个元素。所以你必须将它包装在 div 中，正如 Zargold 提到的。

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

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

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

请注意，我不认为 React 最适合此类工作，我建议您使用更适合的模板语言，例如 Mustache/Handlebars。