时间戳

首页 > 解决方案 > 尝试使用语义组件时出错

javascript - 尝试使用语义组件时出错

问题描述

我正在尝试使用 Semantic UI React Transition 组件。我已经安装并导入了 Semantic：

import { 
  Transition,
 } from "semantic-ui-react";

import 'semantic-ui-css/semantic.min.css';

当我尝试使用它时：

return (
  <div> 
    {
      <div>
      <Transition
        visible={this.state.shouldShowMessageBar}
        animation="scale"
        duration={500}>
          <MessageBar
            messageBarType={ this.state.messageBarStatus.type }
            onDismiss={ () => this.setState({ shouldShowMessageBar: false }) }
          >
            { this.state.messageBarStatus.description }
          </MessageBar>
       </Transition>

      .../

      </div>
    }
  </div>
);

它发出警告：

Warning - [webpack] 'dist':
./node_modules/semantic-ui-react/dist/es/lib/shallowEqual.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* C:\...\Dev\truckDeliverySchedule\node_modules\source-map-loader\index.js!C:\...\Dev\truckDeliverySchedule\node_modules\semantic-ui-react\dist\es\lib\shallowEqual.js
    Used by 1 module(s), i. e.
    C:\...\Dev\truckDeliverySchedule\node_modules\source-map-loader\index.js!C:\...\Dev\truckDeliverySchedule\node_modules\semantic-ui-react\dist\es\lib\index.js
* C:\...\Dev\truckDeliverySchedule\node_modules\source-map-loader\index.js!C:\...\Dev\truckDeliverySchedule\node_modules\semantic-ui-react\dist\es\lib\shallowequal.js
    Used by 2 module(s), i. e.
    C:\...\Dev\truckDeliverySchedule\node_modules\source-map-loader\index.js!C:\...\Dev\truckDeliverySchedule\node_modules\semantic-ui-react\dist\es\lib\shallowEqual.js

我还导入了大约十几个 Office UI Fabric React 组件：

../
import { 
  Dialog,
  DialogType,
  DialogFooter,
} from 'office-ui-fabric-react/lib/dialog';
import { 
  MessageBar,
  MessageBarType,
} from 'office-ui-fabric-react/lib/messageBar';
../

我不确定错误要说什么或如何解决。

编辑：

├─ webpack-dev-middleware@1.12.2
├─ webpack-sources@1.1.0
├─ webpack-stream@4.0.3
├─ webpack@3.11.0

...

├─ semantic-ui-css@2.3.3
├─ semantic-ui-react@0.82.3

...

├─ react-dom@15.6.2
├─ react@15.6.2

标签： javascripttypescriptsemantic-ui-react

解决方案

您使用的是旧版本的 React。SUIR 在 0.82.0 更新到 React 16+ 时发生了重大变化。你要么需要使用 SUIR 0.81.0，要么将你的 React 版本更新到 16+。

推荐阅读