Question

我正在使用History Api在我的网站中使用ajaxify插件切换页面这取决于此网站http://4nf.org/的historyjs。它仅使用请求来更新页面中的div并保留其他所有内容（页眉，页脚）。

它运行良好，但在某些页面中使用reactjs组件时效果不佳。

我正在使用reactjs从服务器呈现数据并在页面中表示它，但是当我切换页面时，反应不会重新加载页面中的内容，但它会给我一个空白页面。

如何让历史记录反应并在每次获取页面时再次重新获取内容？

我下载了针对chrome的反应devtool并且我认识到反应组件仍然在我可以卸载并且每次页面更改时重新安装反应!!？

反应代码：

var Postlist = React.createClass({
    getInitialState: function () {
        socket.on("new",this.Updatepost);
        return {posts: [], hasMore: true, onView: 5};
    },
    componentWillMount: function () {
        this.state.posts.push(this.props.newposts);
        this.setState({posts: this.props.newposts});
    },
    $.ajax({
        url: 'load_posts.php',
        dataType: 'json',
        success: function (data) {
            var x = data;
            React.render(<Postlist newposts={x} />,document.getElementById("main"));
        }.bind(this),
        error: function (xhr, status, err) {
            console.error(this.props.url, status, err.toString());
        }.bind(this)
    });

此代码可在页面之间导航。

       $(document).ready(function() {
         $("#r_sec").ajaxify({
          previewoff: true, 
          fade: 500,
          inline:false,
          selector : ".nav_ul a"});});

当我加载主页时，React代码运行良好，但是当我导航并返回主页时，它会给我一个空白页面，以便我如何重新渲染反应？

Answer 1

如果您想依赖React，则不应使用ajaxify插件。

相反，您应该考虑使用像page.js这样的简单路由器，并编写一条通过AJAX获取数据的路由并使用React进行渲染。

Ajaxify插件的问题在于它使用jQuery渲染内容，现在React和jQuery都在争夺对DOM的控制权。

历史变成反应

1 个答案: