Question

我正在尝试使用MJML电子邮件库在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方法只能返回一个元素。因此，你必须像Zargold所提到的那样将它包裹在div中。

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

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

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

请注意，我不认为React最适合这类工作，我建议你使用模板语言，比如胡子/把手更合适。

Answer 2

你不能使用像这样穿插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>
)

反应JS |渲染多个元素

2 个答案: