[英]How do I rewrite this React stateless function to ES6 React
I'm building my first React App, the majority of it uses ES6 Components, but I took this layout component from a stateless function example and haven't been able to convert it to ES6 (extends Component). 我正在构建我的第一个React App,其中大部分使用ES6组件,但是我从无状态功能示例中获取了该布局组件,并且无法将其转换为ES6(扩展了Component)。 Specifically I can't figure out how to pass the content.
具体来说,我不知道如何传递内容。 What am I missing?
我想念什么?
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>
)
Read DOCS about ES6 Classes 阅读关于ES6类的DOCS
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" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.