zoukankan      html  css  js  c++  java
  • react 父组件获取子组件,调用子组件的方法

    父组件

    import React from 'react';
    import Tabs from './tabs';
    
    export default class FruitsList extends React.Component {
    
      constructor(props) {
        super(props);
    
        this.state = {
          child: '',
        }
      }
      child() {
        this.child.Alert(value)
      }
    
      // 子组件调用父组件的 setChild 方法,传入this( this就是子组件 ),保存到父组件的state里面
      setChild(that) {
        this.setState({
          child: that
        })
      }
    
      render() {
        return (
          <div>
            <Tabs setChild={this.setChild}></Tabs>
            <button onClick={this.child.bind(this)}></button>
          </div>)
      }
    }
    

      

    子组件

    import React from 'react';
    
    export default class Tabs extends React.Component {
    
      Alert() {
        alert("子组件的Alert方法调用")
      }
    
      //组件完成挂载调用父组件传过来的 setChildren(this) 这里的this 指向 Tabs 组件
      componentDidMount() {
        this.props.setChild(this);
      }
      render() {
        return (<div>
          我是子组件
        </div>);
      }
    }
    

      

  • 相关阅读:
    Linux文件及目录查找
    英语单词independent
    英语单词omitting
    英语单词deploy
    英语单词debug
    线程
    进程
    操作系统历史
    分布式爬虫
    爬虫基础
  • 原文地址:https://www.cnblogs.com/liangziaha/p/14526819.html
Copyright © 2011-2022 走看看