如何将此 React 无状态函数重写为 ES6 React答案

【问题标题】：How do I rewrite this React stateless function to ES6 React如何将此 React 无状态函数重写为 ES6 React
【发布时间】：2016-07-27 10:54:56
【问题描述】：

我正在构建我的第一个 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>

)

【问题讨论】：

喜欢jsfiddle.net/69z2wepo/50638
好东西，谢谢！

标签： reactjs ecmascript-6 stateless

【解决方案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" />

【讨论】：

谢谢！正是我想要的。