react（父子组件传参）父组件触发子组件传参

Z时代
2024-01-10
分类：综合

react

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="react.min.js"></script>
    <script src="react-dom.min.js"></script>
    <script src="browser.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
//    父组件触发子组件传参
    let Father=React.createClass({
        hitSon(){
          console.log(this)
            this.xixi.getStudy()
            this.haha.getStudy()
        },
        render(){
            console.log(this)
            return(
                <div>
                    我是父组件
                    <button onClick={this.hitSon}>给儿子来一脚</button>
                    <hr/>
                    <Son></Son>
                    <hr/>
                    <Son ref='hehe'></Son>
                    <hr/>
                    <p>以下两种方法一样</p>
                    <Son ref={obj=>this.xixi=obj}></Son>
                    <Son ref={ (obj)=> {
                        return this.haha=obj
                    }}></Son>
                </div>
            )
        }
    })
let Son=React.createClass({
    getInitialState(){
      return{
          doing:'玩游戏'
      }
    },
    getStudy(){
        this.setState({doing:'学习'})
    },
    render(){
        return(
                <div>我是子组件
                <p>我正在{this.state.doing}</p>
                </div>
        )
    }
})
    ReactDOM.render(<Father/>,app)
</script>
</body>
</html>