如何重写这个阵营无国籍功能ES6阵营

Question

我建立我的第一个应用程序做出反应，它的大部分使用ES6组件，但我从一个无状态的功能例如把这个布局的构成要素，并没有能够转化它ES6（延伸部件）。具体来说，我无法弄清楚如何将内容传递。我错过了什么？

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" />