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