Wie blende ich ein Element aus, wenn in React JSX kein Flash erkannt wurde?

Question

Ich versuche ein Element auszublenden, wenn Flash im Browser nicht gefunden wird. sagen wir, dass es ungefähr so ​​aussieht. Ich bin in Reagieren und JSX verwenden.

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> 
    ) 
    } 
} 

Ersetzen der ({ flashSupported: true }) zu echten Flash-Code erkennen.

in 4,25

Aktualisiert Wenn das Ergebnis der Skript wahr ist, dann, Flash unterstützt wird. (Klebte von https://gist.github.com/getify/675496)

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