为什么在我添加 FlashMessage 组件时我的 React 应用程序没有编译？

Question

我正在使用 React 16.13.0。当我的用户成功提交表单时，我想显示成功的闪现消息。我认为 FlashMessage 是正确的选择 -- https://www.npmjs.com/package/react-native-flash-message。根据文档，我把最后一件事放在 App.js 组件中 ...

import React from 'react';
import logo from './logo.svg';
import './App.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import FormContainer from './containers/FormContainer';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import FlashMessage from "react-native-flash-message";

import Add from "./components/Add";
import Search from "./components/Search";

function App() {
  return (<Router>
    <div className="App">
      <nav className="navbar navbar-expand-lg navbar-light fixed-top">
        <div className="container">
          <Link className="navbar-brand" to={"/add"}>Chicommons</Link>
          <div className="collapse navbar-collapse" id="navbarTogglerDemo02">
            <ul className="navbar-nav ml-auto">
              <li className="nav-item">
                <Link className="nav-link" to={"/add"}>Add</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to={"/search"}>Search</Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>

      <div className="auth-wrapper">
        <div className="auth-inner">
          <Switch>
            <Route exact path='/' component={Add} />
            <Route path="/add" component={Add} />
            <Route path="/search" component={Search} />
          </Switch>
        </div>
      </div>
    </div>
    <FlashMessage position="top" />
    </Router>
  );
}

export default App;

但是当我启动我的应用程序时，出现此错误

./node_modules/react-native-flash-message/src/FlashMessage.js
SyntaxError: /Users/davea/Documents/workspace/chicommons/maps/client/node_modules/react-native-flash-message/src/FlashMessage.js: Unexpected token (148:8)

  146 |     case "success":
  147 |       return (
> 148 |         <Image style={[styles.flashIcon, style]} source={require("./icons/fm_icon_success.png")} {...customProps} />
      |         ^
  149 |       );
  150 |     case "info":
  151 |       return <Image style={[styles.flashIcon, style]} source={require("./icons/fm_icon_info.png")} {...customProps} />;

FlashMessage 不兼容这个版本的 React 吗？我应该使用替代方案吗？

Answer 1

您不能在 react-dom（网络应用程序）中使用来自 react-native（移动应用程序）的模块。 Flash Message 仅适用于 react-native 应用程序

Answer 2

为了澄清之前的答案，您应该使用 react-flash-message（=网络版）而不是 react-native-flash-message（=移动应用程序版）。

你应该使用这个：https://www.npmjs.com/package/react-flash-message

为什么在我添加 FlashMessage 组件时我的 React 应用程序没有编译？

Why isn't my React app compiling when I add a FlashMessage component?

components

form-submit

flash-message

reactjs