如果在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))