1

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

它工作得很好，但是当在某些页面中使用 reactjs 组件时，它就不能很好地工作了。

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

每次我获得页面时，如何让历史进入反应并使反应重新获取内容？

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

反应代码：

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 代码运行良好，但是当我导航并返回主页时，它给了我一个空白页面，那么我该如何重新渲染反应？

4

1 回答 1

0

如果你想依赖 React，你不应该使用 ajaxify 插件。

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

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

于 2015-03-18T18:59:07.443 回答