Reactjs React应用程序中的modernizer.flexbox返回'；未定义'；

我第一次尝试使用Modernizer。下面是一个例子并阅读文档，但我似乎遗漏了一些东西，因为我所有的测试都返回“未定义”

我正在用CreateReact应用程序创建的React应用程序中编写代码 我用它作为主要的步骤

所有代码和配置都在同一目录中

modernizr-config.json

{
  "minify": false,
  "options": [
  "setClasses"
  ],
    "feature-detects": [
    "test/css/flexbox",
    "test/css/flexboxlegacy",
    "test/css/flexboxtweener",
    "test/css/flexwrap"
  ]
}

反应元件代码

import React, { Component } from 'react';
import './App.css';
import Modernizr from './modernizr'

class App extends Component {
  render() {
    let qFlexbox = Modernizr.flexbox ? 'yes' : 'no'
    console.log(Modernizr.flexbox)
    let qFlexboxLegacy = Modernizr.flexboxlegacy ? 'yes' : 'no'
    console.log(Modernizr.flexboxlegacy)
    let qFlexboxTweener = Modernizr.flexboxtweener ? 'yes' : 'no'
    console.log(Modernizr.flexboxtweener)
    let qFlexWrap = Modernizr.flexwrap ? 'yes' : 'no'
    console.log(Modernizr.flexwrap)

    return (
      <div className="App">

        <ul>
          <li>flexbox: {qFlexbox}</li>
          <li>flexboxlegacy: {qFlexboxLegacy}</li>
          <li>flexboxtweener: {qFlexboxTweener}</li>
          <li>flexwrap: {qFlexWrap}</li>
        </ul>
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
导入“/App.css”；
从“./Modernizer”导入Modernizer
类应用程序扩展组件{
render（）{
让qFlexbox=modernizer.flexbox？'yes'：'no'
console.log（modernizer.flexbox）
让qFlexboxLegacy=modernizer.flexboxlegacy？“是”：“否”
console.log（modernizer.flexboxlegacy）
让qFlexboxTweener=modernizer.flexboxtweener？“是”：“否”
console.log（Modernizer.flexboxtweener）
让qFlexWrap=modernizer.flexwrap？'yes'：'no'
console.log（modernizer.flexwrap）
返回(

flexbox:{qFlexbox}
flexboxlegacy:{qFlexboxLegacy}
flexboxtweener:{qFlexboxTweener}
flexwrap:{qFlexWrap}

);
}
}
导出默认应用程序；

---

所有“if”语句返回“no”，所有console.log语句返回“undefined”

您不应该像这样导入Modernizer构建，因为它是一个IIFE。这意味着每次导入文件时，都会免除所有测试。在SPA的上下文中，由于执行了多个测试，您可能会在HTML标记中包含很多类。除此之外，函数不返回任何值，而是将结果附加到窗口对象。这就是为什么测试返回

未定义的

要使其工作，您需要对Modernizer构建输出应用一些更改，使其作为ES6模块工作。您可以在此处找到一个工作示例：。检查以查看需要应用哪些更改

虽然这是可行的，但并不理想，因为如果您重新创建构建以添加更多测试或其他内容，您也必须这样做，但这只是一个开始，并不难做到