ReactアプリのModernizr.flexboxは、 'undefined'を返します。

Question

Modernizrをはじめて使用しようとしています。例と読んだ後、私のテストのすべてが「未定義」を返すので、私は何かが欠けているように見えます。

私は、作成する反応アプリのコードを作成しています。 私はthis tutorialを以下の主な手順として使用しました。

すべてのコード&設定が同じディレクトリにある

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; 

すべてのステートメントが返す '場合' 'ノー' とすべてのconsole.logステートメント 'undefined'

Answer 1

それがIIFEなので、そのようなビルドをインポートしてはいけません。これは、ファイルをインポートするたびにすべてのテストを許すことを意味します。 SPAのコンテキストでは、複数のテストを実行した結果、HTMLタグ内の多くのクラスが終了する可能性があります。それに加えて、関数は値を返しませんが、ウィンドウオブジェクトに結果を添付します。あなたのテストはundefinedを返すのです。

それが働いて得るために、あなたはそれがES6モジュールとして動作させるためにmodernizrのビルド出力にいくつかの変更を適用する必要があります。実際の例はhttps://github.com/fcaldera/modernizr-tryです。 commitsを確認して、適用する必要がある変更内容を確認してください。

これは動作しますが、あなたがより多くのテストか何かを追加するために、ビルドを再作成する場合には同じことをしなければならないので、理想的ではありませんが、それはスタートであり、行うことは難しいことではありません。