zoukankan      html  css  js  c++  java
  • react 组件间通信,父子间通信

    一、父组件传值给子组件

         父组件向下传值是使用了props属性,在父组件定义的子组件上定义传给子组件的名字和值,然后在子组件通过this.props.xxx调用就可以了。

    二、子组件传值给父组件

      子组件向父组件传值和vue一样也是利用props和回调函数实现的。

      1、在子组件

      

    import React, { Component } from 'react';
    class DateChild extends Component {
       constructor(props, context) {
         super(props, context);
         this.state = {
            val:'我是子组件值'
         }
      }
      childClick (e) {
          this.props.callback(this.state.val)
      }
      render() {
         return (
             <div onClick={(e) => this.childClick(e)}>点击传值给父组件</div>
         );
      }
    
    }
    
    export default DateChild;

    因为是从子组件向父组件传值,所以要在子组件中定义点击事件触发函数,而从父组件传来的函数通过this.props来调用,这点和父组件向下传值是一样的。 然后我们在父组件中定义子组件的props传来的函数,在父组件调用这个函数就可以了,一般像下面这样写:

    import React, { Component } from 'react';
    import DateChild from '../component/DateChild.js'
    class Date extends Component {
         constructor(props, context) {
            super(props, context);
             this.state = {
                 content:'我是父组件值'
             }
         }
         callback (mess) {
             this.setState({
               content: mess
             })
         }
         render() {
             return (
                <div>{this.state.content}
                     <DateChild callback={this.callback.bind(this)} />
           </div>
             );
         }
    }
    export
    default Date;

    如果是非父子组件传值,我一般是使用全局定义的状态存储机制来实现的

  • 相关阅读:
    wget(转)
    852. Peak Index in a Mountain Array
    617. Merge Two Binary Trees
    814. Binary Tree Pruning
    657. Judge Route Circle
    861. Score After Flipping Matrix
    832. Flipping an Image
    461. Hamming Distance
    654. Maximum Binary Tree
    804. Unique Morse Code Words
  • 原文地址:https://www.cnblogs.com/muzimumu/p/10824110.html
Copyright © 2011-2022 走看看