(精华2020年5月22日更新) react基础篇 组件的使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简单组件</title>
</head><body><div id="app"></div><div id="app1"></div><script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><script type="text/babel">// 简单的组件function Simple(props){console.log(props);return (<h2>我是简单的组件</h2>)}ReactDOM.render(<Simple name="张三"/>,document.getElementById("app"))// 复杂的组件 es6 classclass Complex extends React.Component{constructor(){super()}render(){return (<div><h1>我是复杂的组件</h1><h1>我是复杂的组件</h1></div>)}}ReactDOM.render(<Complex />,document.getElementById("app1"))</script>
</body></html>


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部