React02-组件通信

2019-01-06 本文已影响0人我也不知道啊丶

React父子组件之间如何通信
父组件传一个函数给子组件，子组件在适当的时候调用这个函数
React爷孙组件之间如何通信
爷组件把函数传给父组件，父组件把函数传给孙组件
看一个具体的demo吧
这是最终效果

龟兔赛跑
看看具体代码：
html部分

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>react-demo2龟兔赛跑</title>
    <link rel="stylesheet" href="./style.css">
    <script src="https://cdn.bootcss.com/react/16.7.0/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.7.0/umd/react-dom.production.min.js"></script>
    <script src="./main.js"></script>
</head>
<body>
    <div id="root">
        
    </div>
</body>
</html>

css部分

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
body{
    padding:0 20px;
    overflow: hidden
}
.head{
    display: flex;
    justify-content: center;
}
.track{
    border:1px solid black;
}
.playGround{
    border:1px solid black;
    background:green
}
.referee{
    width:50px;
    height:50px;
}

js部分

function Rabbit(props){ //兔子
    return(
        <h1>🐰用时：<span>{props.result}</span></h1>
    )
}

function Tortoise(props){ //乌龟
    return(
        <h1>🐢用时：<span>{props.result}</span></h1>
    )
}

function Header(props){
    let result1 = props.result1
    let result2 = props.result2
    return (
        <div className='head'>
            <Rabbit result={result1}/>
            <Tortoise result={result2}/>
        </div>
    )
}

class Track1 extends React.Component{
    constructor(props){
        super(props)
        let n = 0;
        this.state = {
            style : {
                transform : `translateX(${n}%)`
            }
        }
        let timerId = setInterval(() =>{
            n+=10
            this.setState({
                style:{
                    transform : `translateX(${n}%)`
                }
            })
            if(n>=100){
                window.clearInterval(timerId)
                this.props.success('我是小兔子')
            }
        },1000)
    }

    render(){
        return(
            <div>
                <div className='play' style={this.state.style}>🐰</div>
                <div className='track'></div>
            </div>
        )
    }
}

class Track2 extends React.Component{
    constructor(props){
        super(props)
        let n = 0
        this.state = {
            style : {
                transform : `translateX(${n}%)`
            }
        }
        let timerId = setInterval(() =>{
            n += 5
            this.setState({
                style:{
                    transform : `translateX(${n}%)`
                }
            })
            if(n>=100){
                window.clearInterval(timerId)
                this.props.success('我是小乌龟')
            }
        },1000)
    }
    render(){
        return(
            <div>
                <div className='play' style={this.state.style}>🐢</div>
                <div className='track'></div>
            </div>
        )
    }
}

function Playground(props){
    let success1 = props.success1
    let success2 = props.success2
    return (
        <div className='playGround'>
            <Track1 success={success1}/>
            <Track2 success={success2}/>
        </div>
    )
}

class App extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            result1 : 0,
            result2 : 0
        }
        this.t0 = new Date()
    }
    success1(x){
        console.log(x)
        let r1 =  parseInt((new Date() - this.t0)/1000) + 's'
        this.setState({
            result1 : r1
        })
    }
    success2(x){
        console.log(x)
        let r2 = parseInt((new Date() - this.t0)/1000) + 's'
        this.setState({
            result2 : r2
        })
    }
    render(){
        return (
            <div>
                <Header result1={this.state.result1} result2={this.state.result2} />
                <Playground success1={this.success1.bind(this)} success2={this.success2.bind(this)}/>
            </div>
        )
    }
}


ReactDOM.render(
    <App />,
    document.querySelector('#root')
)

React02-组件通信

猜你喜欢

热点阅读