React JS | 여러 요소 렌더링

Question

MJML 전자 메일 라이브러리를 사용하여 React에서 전자 메일을 만들려고합니다. 그것은 반응을 실행하고 그것을 모두 작동하지만 두 섹션을 렌더링하는 대신 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

당신은 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> 
) 

Answer 2

글쎄, 구성 요소의 render 방법은 단 하나 개의 요소를 반환 할 수 있습니다. 그래서 Zargold가 말한대로 div에 포장해야합니다.

MJML 구성 요소는 표준 React 구성 요소 이상입니다.

React 컨텍스트에서 사용할 수없는 일부 내부 논리가 있습니다. IMO는 표준 HTML 요소로 MJML을 생성해야 다음 renderToStaticMarkup로 렌더링 문자열로 mjml2html 함수에 전달하고 mjml 내가 이런 종류의 가장 적합한 반작용 생각하지 않는다

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

주를 컴파일합니다 일의 콧수염/핸들바와 같은 템플릿 언어를 사용하는 것이 좋습니다.