Wie schreibe ich diese React statuslose Funktion auf ES6 React

Question

Ich baue meine erste React App, die Mehrheit davon verwendet ES6-Komponenten, aber ich nahm diese Layout-Komponente aus einem statuslosen Funktionsbeispiel und konnte nicht konvertieren es zu ES6 (erweitert Komponente). Insbesondere kann ich nicht herausfinden, wie man den Inhalt weitergibt. Was vermisse ich?

export const MainLayout = ({content}) => (

<div className="main-layout"> 
    <header> 
    <h2 href="/">Home</h2> 
    <nav> 
     <a href="/about">About</a> 
     <a href="/profile">Profile</a> 
     <AccountsUI /> 
    </nav> 
    </header> 
    <main> 
{content} 
    </main> 
</div> 

) 

Answer 1

Read DOCS about ES6 Classes

class MainLayout extends React.Component { 
 
    render() { 
 
    return (
 
     <div className="main-layout"> 
 
     <header> 
 
      <h2 href="/">Home</h2> 
 
      <nav> 
 
      <a href="/about">About</a> 
 
      <a href="/profile">Profile</a> 
 
      </nav> 
 
     </header> 
 
     <main> 
 
      {this.props.content} 
 
     </main> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <MainLayout content="Main content" />, 
 
    document.getElementById('app') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app" />