短視訊直播原始碼，React children元件例項提示框

短視訊直播原始碼，React children元件例項提示框

// 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元件例項提示框， 更多內容歡迎關注之後的文章