// child传递标签,通常在通用型组件时传递 使用
import React, { Component } from 'react';
// 第一个类 (也可以跨文件传递文件)
class Childes extends Component {
state={
close : true
}
render() {
let {children} = this.props //接收
let {close} = this.state
console.log(this)
return (
<div style={{
display : close ? "block" :"none",
border:"1px solid"
}}>
{children}
<button
onClick = {
()=>{
this.setState({
close:false
})
console.log(123)
}
}
>点击关闭</button>
</div>
);
}
}
//第二个类
class App extends Component {
state ={
show:false,
main:false
}
render() {
let {show,main} = this.state
return (
<div>
{/* 表达式 child 类似于匿名插槽 也可以写具名的 */}
{show ? (
<Childes>
<h1>太热了</h1>
</Childes>):""}
{/* 二号组件 不同的情况下 同样是弹出框但是弹出的内是不一样的 */}
{/* {main ? (
<Childes>
<h1>太热了</h1>
</Childes>):""} */}
<button
onClick = {
()=>{
this.setState({
show:true
})
}
}
>点击弹框</button >
</div>
);
}
}
export default App;
React children组件实例提示框
最新推荐文章于 2024-05-11 09:58:03 发布