Question

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

1 个答案: