我如何将这个 React 无状态函数重写为 ES6 React

Question

我正在构建我的第一个 React 应用程序，其中大部分使用 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" />

我如何将这个 React 无状态函数重写为 ES6 React

How do I rewrite this React stateless function to ES6 React

reactjs

ecmascript-6

stateless