如果在 React JSX 中未检测到 flash，如何隐藏元素

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 更新

如果脚本结果为真，则支持flash。（粘贴自https://gist.github.com/getify/675496）

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

如果在 React JSX 中未检测到 flash，如何隐藏元素

How do I hide an element if flash has not been detected in React JSX

reactjs

react-jsx