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

两种方式：

使用全局小部件。

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

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上下文将其存储为所有组件的全局道具。

如何从另一个组件中调用组件引用？

1 个答案: