1

我对 ReactJS 相当陌生，并且使用 NodeJS 和 Express 来构建一个小型 SPA 应用程序。我的要求是在初始页面加载时从 mysql 加载数据。脚本看起来像这样：

/** @jsx React.DOM */
var React = require('react');
var Request = require('request');

var HomePage = React.createClass({

    getInitialState: function() {
        return {
            name: "Batman"
        };
    },
    componentDidMount: function() {
        var obj = this;
        Request('http://ajaxtown.com/playground/data.php', function (error, response, body) {
          if (!error && response.statusCode == 200) {
            var info = JSON.parse(body);
            console.log(info[0]);
            obj.setState({
                name: info[0].firstName
            })
          }
        });

    },
    getDefaultProps: function () {
        return {
          size: 100
        }
    },

    handleClick : function() {
        console.log("Clicked");
        this.setState({
          name : "bob"
        });
    },
    render: function () {
        return (
              <h2 onClick={this.handleClick}>{this.state.name}</h2>
        );

    }
});
module.exports.HomePage = HomePage;

这个脚本可以工作，但问题是在页面加载之后，请求被发送到服务器，然后 UI 得到更新的响应。我假设这对 SEO 没有帮助。相反，我希望数据首先可用，然后呈现 UI。

其次，我也尝试使用node-mysql但因为我正在创建同构 javascript 应用程序，所以凭据是可见的。不仅如此，浏览器不能使用 TCP/IP，所以它仍然不能工作。所以这是一个教训。

如果我必须创建一个博客应用程序，它将非常动态。在这种情况下 SEO 将如何工作？还是同构javascript仅意味着静态内容？

我对这个概念有点混淆了。有人可以指导我吗？

4

1 回答 1

0

如果您希望您的数据在初始渲染获取外部之前准备好：

$.ajax({...}).success(function(res) {
     <MyView data={res} /> // render your function on success
});

相关的类似帖子：bind(this) not working on ajax success function

于 2015-08-30T15:41:26.937 回答