1

我尝试在 Android 浏览器中运行来自http://facebook.github.io/react/docs的一些示例，但它们不起作用 - 页面为空。所有页面都由本地运行的 Django 开发 Web 服务器提供，并且工作正常，除了那些使用 React 的页面。完全相同的链接在笔记本电脑上工作正常。来自他们的文档“如果您想在触摸设备（即手机或平板电脑）上使用 React，只需调用React.initializeTouchEvents(true);以打开它们。” 我认为在移动设备上运行应该没有问题。我在这里缺少一些陷阱吗？来源是：

<!DOCTYPE html>
<html>
  <head>
    <title>Hello React</title>
    <script src="/static/phs/js/react.js"></script>
    <script src="/static/phs/js/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <div id="example1"></div>
    <script type="text/jsx">
        /** @jsx React.DOM */
        React.initializeTouchEvents(true);
        var HelloWorld = React.createClass({
          render: function() {
            return (
              <p>
                Hello, <input type="text" placeholder="Your name here" />!
                It is {this.props.date.toTimeString()}
              </p>
            );
          }
        });

        setInterval(function() {
          React.renderComponent(
            <HelloWorld date={new Date()} />,
            document.getElementById('example')
          );
        }, 1000);

        var LikeButton = React.createClass({
          getInitialState: function() {
            return {liked: false};
          },
          handleClick: function(event) {
            this.setState({liked: !this.state.liked});
          },
          render: function() {
            var text = this.state.liked ? 'like' : 'unlike';
            return (
              <p onClick={this.handleClick}>
                You {text} this. Click to toggle.
              </p>
            );
          }
        });

        React.renderComponent(
          <LikeButton />,
          document.getElementById('example1')
        );
    </script>
  </body>
</html>
4

2 回答 2

1

React 在 Android 的 2.3.5 内置浏览器和 Dolphin Browser 10.1.2 上对我不起作用。通过安装最新的 Firefox 修复。

于 2013-12-04T13:46:31.173 回答
1

所以，事实证明 React 可以在 Android 浏览器上运行，至少在 Android 浏览器 4 上是可能的（我手头没有早期版本）。诀窍是您必须手动添加 React 所依赖的 polyfill，特别是es5-shim和html5shiv。

有关 Facebook 为何默认不包含在 React 中的立场的更多详细信息，请参见此处。简短的版本是：

  1. 将 javascript 库编写到规范中更容易更好；
  2. 如果库包含它们自己的 polyfill 版本，并且您使用许多库，您将多次发送相同的代码。
于 2014-09-14T15:48:36.187 回答