Question

当我尝试在我的项目中使用office fabric ui并导入组件例如面板时出现此错误 Screen。我也记录了这种行为。 https://giphy.com/gifs/3ohjV6gZTxE8TiqVfa
步骤进行：

我通过* dotnet new react *
我通过* npm安装办公室--save install office-ui-fabric-react *
我将Fabric组件导入boot.tsx并使用它。
我将Panel组件导入Layout.tsx并使用它。
当我单击按钮激活时，在控制台中出现错误* Layer.componentDidUpdate（）中的异常：不变违规：addComponentAsRefTo（...）：只有ReactOwner可以有refs。您可能会在组件的“render”方法中创建一个组件，或者您有多个React加载的副本*

我将代码放在repo https://bitbucket.org/vaalgrindalone/dotnet-react-template-office-fabric-ui-issue/src上这是我的package.json

   {
  "name": "dotnet_react_template_office_fabric_ui_issue",
  "private": true,
  "version": "0.0.0",
  "devDependencies": {
    "@types/history": "4.6.2",
    "@types/react": "^16.0.36",
    "@types/react-dom": "16.0.3",
    "@types/react-hot-loader": "3.0.5",
    "@types/react-router": "4.0.21",
    "@types/react-router-dom": "4.2.3",
    "@types/webpack-env": "1.13.5",
    "aspnet-webpack": "^2.0.1",
    "aspnet-webpack-react": "^3.0.0",
    "awesome-typescript-loader": "3.4.1",
    "bootstrap": "4.0.0",
    "css-loader": "0.28.9",
    "event-source-polyfill": "0.0.12",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.6",
    "isomorphic-fetch": "2.2.1",
    "jquery": "3.3.1",
    "json-loader": "0.5.7",
    "react": "16.2.0",
    "react-dom": "16.2.0",
    "react-hot-loader": "3.1.3",
    "react-router-dom": "4.2.2",
    "style-loader": "0.20.1",
    "typescript": "2.7.1",
    "url-loader": "0.6.2",
    "webpack": "3.10.0",
    "webpack-hot-middleware": "2.21.0"
  },
  "dependencies": {
    "@types/prop-types": "^15.5.2",
    "office-ui-fabric-react": "^5.48.2"
  }
}

这是webpack.config.js

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const bundleOutputDir = './wwwroot/dist';

module.exports = (env) => {
    const isDevBuild = !(env && env.prod);
    return [{
        stats: { modules: false },
        entry: { 'main': './ClientApp/boot.tsx' },
        resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
        output: {
            path: path.join(__dirname, bundleOutputDir),
            filename: '[name].js',
            publicPath: 'dist/'
        },
        module: {
            rules: [
                { test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
                { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },
        plugins: [
            new CheckerPlugin(),
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin(),
            new ExtractTextPlugin('site.css')
        ])
    }];
};

和tsconfig.ts

{
  "compilerOptions": {
    "baseUrl": ".",
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "jsx": "react",
    "sourceMap": true,
    "skipDefaultLibCheck": true,
    "strict": true,
    "types": ["webpack-env"],
    "experimentalDecorators": true
  },
  "exclude": [
      "bin",
      "node_modules"
  ]
}

我尝试通过resolve.alias在webpack中做出别名反应但没有任何反应。我也尝试把反应放到外部并从html文件中的cdn导入它，这不是一个好的解决方案。我认为我的配置不正确。
欢呼声。

Dotnet React模板＆amp; Office Fabric UI - 问题

0 个答案: