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

如果脚本的结果为true，则支持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中未检测到闪存，如何隐藏元素

1 个答案: