React JSXでフラッシュが検出されなかった場合の要素を非表示にするには

Question

ブラウザでFlashが検出されない場合、要素を非表示にしようとしています。このようなものに見えるとしましょう。私はReactとJSXを使っています。

export default class MyComponent extends Component { 
    // Some code here 

    render() { 
    // some code here 

    return (
     <div> 
     <div> 
      <span>I am going to show no matter if flash is detected or not</span> 
     </div> 
     <div> 
      <span>I am not going to show if flash has not been detected</span> 
     </div> 
     </div> 
    ) 
    } 
} 

Answer 1

export default class MyComponent extends Component { 
    constructor() { 
    super() 
    this.state = { flashSupported: false } 
    } 

    componentDidMount() { 
    //check flash is supported here 
    this.setState({ flashSupported: true }) 
    } 

    render() { 
    // some code here 
    const { flashSupported } = this.state 
    return (
     <div> 
      <div> 
      <span>I am going to show no matter if flash is detected or not</span> 
      </div> 
      { 
      flashSupported && (
      <div> 
       <span>I am not going to show if flash has not been detected</span> 
      </div>) 
      } 
     </div> 
    ) 
    } 
} 

本当のフラッシュ検出コードに({ flashSupported: true })を交換してください。

は4.25

スクリプトの結果が真である場合には、フラッシュがサポートされている。（https://gist.github.com/getify/675496から貼り付け）

((typeof navigator.plugins != "undefined" && typeof navigator.plugins["Shockwave Flash"] == "object") || (window.ActiveXObject && (new ActiveXObject("ShockwaveFlash.ShockwaveFlash")) != false))