javascript - 如何在 react 中从另一个组件调用组件引用？

Question

我使用react-notification-system库，并发现我的代码或多或少像这样。

import React from 'react';
import Notification from 'react-notification-system';

class Notif extends React.Component {

  constructor(props) {
    super(props);

    this.notificationSystem = null;
  }

  componentDidMount() {
    // how to export this?
    this.notificationSystem = this.refs.notificationSystem;
  }

  render() {
    return <Notification ref="notificationSystem" />;
  }

}

export default Notif;

如何导出该 notificationSystem 以便我可以在任何地方使用它？

Answer 1

两种方式:

1. 使用全局小部件。

只需添加一个全局小部件，如下所示。

var _component

export function set(component) {
    _component = component
}

export function get() {
    return _component
}

然后在您的 AppComponent 中注册它:

import {set} from './notify'
class App extends React.Component {
    componentDidMount() {
        set(this.refs.notificationSystem)
    }
}

在任何其他组件中，调用它:

import {get} from './notify'
class AnyComponent extends React.Component {
    alert() {
        get().doSomething()
    }
}

使用 React context 将其存储为所有组件的全局 props。