短视频直播源码，React children组件实例提示框

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

以上就是短视频直播源码，React children组件实例提示框，更多内容欢迎关注之后的文章