react组件的简单案例--react起步

最新推荐文章于 2024-03-20 06:59:53 发布

睡不着的李商隐

最新推荐文章于 2024-03-20 06:59:53 发布

阅读量199

点赞数

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45801321/article/details/125089318

版权

react 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

	<script
		crossorigin
		src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
	></script>
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
	<title>Document</title>
</head>
<body>
	<div id="wrap"></div>
	<script type="text/babel">
		function Login(props) {
			// 子组件借用父组件的方法进而修改父组件的属性 传递方向是不可逆
			return (
				<div>
					<h2 onClick={props.handleClick}>login</h2>
				</div>
			)
		}
		function Layout(props) {
			return (
				<div>
					<h2 onClick={props.handleClick}>layout</h2>
				</div>
			)
		}
		class Boxx extends React.Component {
			state = {
				isLoging: false,
			}
			change = () => {
				this.setState({
					isLoging: !this.state.isLoging,
				})
			}
			render() {
				const { isLoging } = this.state
				return (
					<div>
						{isLoging ? (
							<Login handleClick={this.change} />
						) : (
							<Layout handleClick={this.change} />
						)}

						<button onClick={this.change}>
							{!isLoging ? '登录' : '退出'}
						</button>
					</div>
				)
			}
		}
		ReactDOM.render(<Boxx />, document.querySelector('#wrap'))
	</script>
</body>