Question

我需要为移动用户取消渲染一些反应组件

当用户来自移动设备时如何取消渲染组件？

由于

Answer 1

我认为这是一个简单的解决方案：

外部组件：

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

内部组件：

React.createClass({
  getInitialState: function() {
    return {
      isMobile: isMobile.any(),
      ...
    }
  },
  ...
  render: function() {
    { // base the display of the component on the boolean this.state.isMobile

如果if / else变得比简单的三元组更复杂，请务必将它从render（）移到帮助器。

希望这有帮助！

编辑：如果您没有做过大量的事情，这可能有助于您的条件渲染。 How to load components conditionally in ReactJS

移动测试代码来源：http://www.abeautifulsite.net/detecting-mobile-devices-with-javascript/

如何在用户来自移动设备时取消渲染组件？

1 个答案: