从父类调用子类的方法

24 浏览
0 Comments

从父类调用子类的方法

我有两个组件：

  1. 父组件
  2. 子组件

我尝试从父组件调用子组件的方法，但我尝试了这种方法却没有结果：

class Parent extends Component {
  render() {
    return (
      
        
      
      );
    }
  }
class Child extends Component {
  getAlert() {
    alert('clicked');
  }
  render() {
    return (

Hello

); } }

有办法从父组件调用子组件的方法吗？

注意：子组件和父组件在两个不同的文件中。

admin 更改状态以发布 2023年5月25日
0

2 答案

0 Comments

在这里，你可以使用另一种模式：

class Parent extends Component {
 render() {
  return (
       this.clickChild = click}/>
      
  );
 }
}
class Child extends Component {
 constructor(props) {
    super(props);
    this.getAlert = this.getAlert.bind(this);
 }
 componentDidMount() {
    this.props.setClick(this.getAlert);
 }
 getAlert() {
    alert('clicked');
 }
 render() {
  return (
    
Hello

  );
 }
}

它的作用是在子组件挂载时设置父组件的clickChild方法。这样，当你在父组件中点击按钮时，它就会调用clickChild，而clickChild又调用了子组件的getAlert方法。

如果你的子组件包装在connect()中，这种方法也适用，所以你不需要使用getWrappedInstance()技巧。

请注意，你不能在父组件中使用onClick={this.clickChild}，因为当父组件被渲染时，子组件尚未被挂载，因此this.clickChild尚未被分配。使用onClick={() => this.clickChild()}是可以的，因为当你点击按钮时，this.clickChild已经被分配了。

0
0 Comments

首先，让我表达一下在React领域中通常不是这样做的。通常你想做的是通过props将功能传递给子组件，在事件中从子组件中通知（或者更好的是：dispatch）。

但是如果你必须在子组件上暴露一个命令式的方法，你可以使用refs。请记住，这是一种逃生门，通常表示有更好的设计可用。

以前，refs只支持基于类的组件。随着React Hooks的出现，这不再是情况了。

使用Hooks的现代React（v16.8+）

const { forwardRef, useRef, useImperativeHandle } = React;
// We need to wrap component in `forwardRef` in order to gain
// access to the ref object that is assigned using the `ref` prop.
// This ref is passed as the second parameter to the function component.
const Child = forwardRef((props, ref) => {
  // The component instance will be extended
  // with whatever you return from the callback passed
  // as the second argument
  useImperativeHandle(ref, () => ({
    getAlert() {
      alert("getAlert from Child");
    }
  }));
  return 
Hi
;
});
const Parent = () => {
  // In order to gain access to the child component instance,
  // you need to assign it to a `ref`, so we call `useRef()` to get one
  const childRef = useRef();
  return (
      
      
  );
};
ReactDOM.render(
  ,
  document.getElementById('root')
);

useImperativeHandle()的文档在这里：

useImperativeHandle自定义实例值，当使用ref时，它会向父组件公开。

使用Class组件的旧API（>= react@16.4）

const { Component } = React;
class Parent extends Component {
  constructor(props) {
    super(props);
    this.child = React.createRef();
  }
  onClick = () => {
    this.child.current.getAlert();
  };
  render() {
    return (
        
        
    );
  }
}
class Child extends Component {
  getAlert() {
    alert('getAlert from Child');
  }
  render() {
    return 
Hello
;
  }
}
ReactDOM.render(, document.getElementById('root'));

回调Ref API

回调式Refs是另一种实现这一功能的方法，但在现代React中不太常见：

const { Component } = React;
const { render } = ReactDOM;
class Parent extends Component {
  render() {
    return (
         { this.child = instance; }} />
        
    );
  }
}
class Child extends Component {
  getAlert() {
    alert('clicked');
  }
  render() {
    return (
      
Hello

    );
  }
}
render(
  ,
  document.getElementById('app')
);

0