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

zhibo系統開發發表於2022-07-13

短視訊直播原始碼,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元件例項提示框, 更多內容歡迎關注之後的文章


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2905558/,如需轉載,請註明出處,否則將追究法律責任。

相關文章