如何重寫這個陣營無國籍功能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" />