Question

我是ReactJS的新手，并且想使用这个库：https://github.com/teodosii/react-notifications-component

声明“必须将ReactNotificationsComponent组件放置在应用程序的根目录才能正常工作，否则由于位置原因它可能与其他DOM元素冲突。”

我遵循了使用指南，但是我不确定如何从子组件中调用addNotification函数。

App.js

import React, { Component } from 'react'
import ReactNotification from "react-notifications-component"

import Header from './components/Header'

class App extends Component {
  constructor() {
    super()
    this.addNotification = this.addNotification.bind(this)
    this.notificationDOMRef = React.createRef()
  }

  addNotification() {
    this.notificationDOMRef.current.addNotification({
      title: "Awesomeness",
      message: "Awesome Notifications!",
      type: "success",
      insert: "top",
      container: "top-right",
      animationIn: ["animated", "fadeIn"],
      animationOut: ["animated", "fadeOut"],
      dismiss: { duration: 5000 },
      dismissable: { click: true }
    })
  }

  render() {
    return (
      <div>
        <ReactNotification ref={this.notificationDOMRef} />
        <Header />
      </div>
    )
  }
}



export default App

Header.js

import React, { Component } from 'react'
import logo from "../assets/images/logo/logo-light.png"
import { BrowserRouter as Router, Route, NavLink, Switch } from "react-router-dom"
import Home from '../pages/Home'
import Apply from '../pages/Apply'

export default class Header extends Component {
  render() {
    return (
      <Router>
        <div>
          <Route render={({ location }) => (
            <header id="navbar-spy" className="header header-1 header-dark header-fixed">
                <nav id="primary-menu" className="navbar navbar-fixed-top">
                    <div className="container">
                        <div className="navbar-header">
                            <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
                                <span className="sr-only">Toggle navigation</span>
                                <span className="icon-bar"></span>
                                <span className="icon-bar"></span>
                                <span className="icon-bar"></span>
                            </button>
                            <img className="logo-light" src={logo} alt="Logo" draggable="false" />
                        </div>

                        <div className="collapse navbar-collapse pull-right" id="navbar-collapse-1">
                            <ul className="nav navbar-nav nav-pos-right navbar-left">
                                <li className="">
                                    <NavLink to="/" className="menu-item">Home</NavLink>
                                </li>

                                <li className="">
                                    <NavLink to="/apply" className="menu-item">Apply</NavLink>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>

            </header>
            )}
          />

          <Route path="/" exact component={Home} />
          <Route path="/apply" exact component={Apply} />
        </div>
      </Router>
    )
  }
}

当您单击“应用”链接时，它将加载Apply组件。在该组件中，他们可以接收到错误/成功通知。我希望从该组件告诉App.js中的ReactNotification要呈现的标题，消息和类型。如何从Apply.js到App.js进行通信？

Answer 1

您可以将addNotification函数传递给Header组件：

<Header addNotification={this.addNotification} />

您可以继续将其传递给其他子组件，直到准备好调用它为止。

从另一个组件调用App.js中的函数

1 个答案: