react中父子间的简单通信

最新推荐文章于 2023-10-26 16:05:36 发布

Ciao_Traveler

最新推荐文章于 2023-10-26 16:05:36 发布

阅读量321

点赞数

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/weixin_44202904/article/details/107049330

版权

react 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

react中父子间的的通信

由于不是在项目中写的，所以需要引入一些核心库
react.development.js
react-dom.development.js
babel.min.js>

父组件中改变子组件的状态。

方法一：在父组件中通过this.ref.xxx拿到子组件对象,直接在父组件中改变子组件的状态，对子组件来说并不是很好

<body>
    <div id="app"></div>
    <script type="text/babel">
        class Parent extends React.Component {
            add(){
               let c=this.refs.xxx;
               console.log(this.refs.xxx)
               c.state.num+=1;
               this.forceUpdate()
            }
            render() {
                return (
                    <div>
                        <h1>父组件</h1>
                        <button onClick={this.add.bind(this)}>+1</button>
                        <hr /> 
                        <Child ref="xxx" ></Child>
                    </div>
                )
            }
        }
        class Child extends React.Component {
            state = {
                num: 0
            }
            render() {
                return (
                    <div>
                        <p>{this.state.num}</p>
                        <h3>子组件</h3>
                    </div>
                )
            }
        }
        ReactDOM.render(<Parent />, document.getElementById("app"));
    </script>
</body>

方法二：在子组件中定义一个改变状态的方法，然后在父组件中进行调用

 <div id="app"></div>
    <script type="text/babel">
    // 组件类，本质上还是一个类，一个类只有被创建的时候才能发挥作用
        // 一个类需要new ，不new相当于没用
        class Parent extends React.Component {
            add=()=>{
               let c= this.refs.xxx;
            //    调用子组件中的方法
               c.add()
            }
            render() {
                return (
                    <div>
                        <h1>父组件</h1>
                        <button onClick={this.add}>+1</button>
                        <hr /> 
                        {/* 给组件起个别名，最好用ref,这个使用的时候，就相当于new */}
                        <Child ref="xxx" ></Child>
                    </div>
                )
            }
        }
        // class类 ----function
        class Child extends React.Component {
            state = {
                num: 0
            }
            add=()=>{
                this.setState({
                    num:this.state.num+1
                })
            }
            render() {
                return (
                    <div>
                        <p>{this.state.num}</p>
                        <h3>子组件</h3>
                    </div>
                )
            }
        }
        ReactDOM.render(<Parent />, document.getElementById("app"));
    </script>
        ```

在子组件中改变父组件的状态

方法一：在子组件中直接修改父组件的状态，通过给子组件传递自己的组件对象xxx={this}，然后子组件使用this.props.xxx进行接收，可以在自己定义的方法中修改父组件的状态。

class Parent extends React.Component {
    state={
        num:0
    }
    render() {
        return (
            <div>
                <h1>父组件</h1>
                <p>{this.state.num}</p>
                <hr /> 
                <Child xxx={this} ></Child> 
            </div>
        )
    }
}
class Child extends React.Component {
    add=()=>{
        let p=this.props.xxx;
        console.log(p)
        p.state.num+=1
        p.forceUpdate()
    }
    render() {
        return (
            <div>
                <p></p>
                <button onClick={this.add}>+1</button>
                <h3>子组件</h3>
            </div>
        )
    }
}

方法二：在父组件中定义一个修改状态的方法，然后把这个方法传递给子组件，子组件对该方法进行接收和调用

class Parent extends React.Component {
   state={
       num:0
   }
   add=()=>{
       this.setState({
           num:this.state.num+1
       })
   }
   render() {
       return (
           <div>
               <h1>父组件</h1>
               <p>{this.state.num}</p>
               <hr /> 
               <Child add={this.add} ></Child> 
           </div>
       )
   }
}
class Child extends React.Component {
   add=()=>{
       this.props.add()
   }
   render() {
       return (
           <div>
               <p></p>
               <button onClick={this.add}>+1</button>
               <h3>子组件</h3>
           </div>
       )
   }
}

Ciao_Traveler

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react中父子间的简单通信

react中父子间的的通信由于不是在项目中写的，所以需要引入一些核心库react.development.jsreact-dom.development.jsbabel.min.js>父组件中改变子组件的状态。方法一：在父组件中通过this.ref.xxx拿到子组件对象,直接在父组件中改变子组件的状态，对子组件来说并不是很好<body> <div id="app"></div> <script type="text/babel"
复制链接

扫一扫