尝试使用语义组件时出错

Question

我正在尝试使用语义UI React转换组件。我已经安装并导入了语义：

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

Answer 1

您使用的是较旧版本的React。SUIR had a breaking change at 0.82.0 updating to React 16+。你需要使用Suir0.81.0或者更新你的React版本到16+。