Question

我正在一个简单的项目上，我希望实现react-alert API，但是当我运行它时，没有显示任何元素，也没有显示错误消息。在控制台上检查出以下错误：

未捕获的不变变量：对象作为React子对象无效（找到：键为{$$ typeof，render}的对象）。如果要渲染子级集合，请改用数组。

我为警报创建了一个脚本。

Alerts.js

import React, { Component, Fragment } from "react";
import { withAlert } from "react-alert";

export class Alerts extends Component {
  componentDidMount() {
    this.props.alert.show("It works!");
  }

  render() {
    return <Fragment />;
  }
}

export default withAlert(Alerts);

并在App.js中实现

import React, { Component, Fragment } from "react";
import ReactDOM from "react-dom";

import { transitions, positions, Provider as AlertProvider } from "react-alert";
import AlertTemplate from "react-alert-template-basic";

import Header from "./layout/Header";
import Dashboard from "./projects/Dashboard";
import Alerts from "./layout/Alerts";

import { Provider } from "react-redux";
import store from "../store";

// ALERT OPTIONS
const alertOptions = {
  timeout: 3000,
  position: positions.TOP_CENTER,
  transitions: transitions.SCALE
};

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <AlertProvider template={AlertTemplate} {...alertOptions}>
        <Fragment>
          <Header />
          <Alerts />
          <div className="container">
            <Dashboard />
          </div>
        </Fragment>
        </AlertProvider>
      </Provider>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

Answer 1

在文档here中，正确的语法是使用withAlert()(Component)（请不要忘记()！）。因此，在您的Alerts.js中，请改用它：

export default withAlert()(Alerts);

Answer 2

开始阅读本文档[https://github.com/schiehll/react-alert][docoment之前如何使用]

export default withAlert()(Alerts)

反应警报不显示

2 个答案: