javascript - ReactJS:Dom 以错误的顺序渲染

Question

我有一个页面，它是一个包含多个列的表格。用户可以根据几个不同的值对表中的条目进行排序；当用户单击标题时，将执行排序，并触发页面的新呈现。然而，虽然排序执行正确，但 DOM 并未以正确的顺序呈现；表中的一些元素交换了位置，但大多数元素保持不变。当使用 Chrome 的 React 插件检查元素时，React 的顺序是正确的；只是 DOM 实际上与 React 认为正在发生的事情并不匹配。

我的代码如下:

var BinData = React.createClass( {
    render: function() {
        return (
            <tr className="databin">    
                <td className="name">
                    <span className="name-field">
                        <span className="databin-name">{this.props.data.Name ? this.props.data.Name: "Databin Name"}</span>
                        <span className="wdd-icon-edit-name"></span>
                    </span>
                </td>
                <td className="id">{this.props.data.ShortID ? this.props.data.ShortID: "None"}</td>
                <td className="date">{this.props.data.formatedLatestTimestamp}</td>
                <td className="url"><a href={this.props.data.ShortURL}>{this.props.data.ShortURL}</a></td>
                <td className="size">{this.props.data.Size}</td>
                <td className="owner">{this.props.data.Owner}</td>
                <td className="actions"><span className="icon-container"><span className="wdd-icon-wolfram-alpha"><br /></span><span className="text analyze">Analyze in Wolfram|Alpha</span></span><span className="icon-container"><span className="wdd-icon-wolfram-language-small"><br /></span><span className="text explore">Open in Wolfram Language</span></span><span className="icon-container"><span className="wdd-icon-download"><br /></span><span className="text download">Download raw data</span></span><span className="icon-container"><span className="wdd-icon-collaborate"><br /></span><span className="text access">Access settings</span></span><span className="icon-container"><span className="wdd-icon-delete"><br /></span><span className="text delete">Remove from my list</span></span></td>
            </tr>

        );
    }
});


var BinList = React.createClass( {
    getInitialState: function() {
        return {
            sorting: "Date"
        };
    },

    sortByName: function(bins,selected) {
        function compare(a,b) {
            if (a.Name < b.Name) {
                return -1;
            }
            if (a.Name > b.Name) {
                return 1;
           }
           return 0;
        }
        if (selected == "My Databins") {
            bins.Creator.sort(compare);
        }
        else if (selected == "Recent Databins") {
            bins.Contributor.sort(compare);
        }
        else {
            bins.SharedWithMe.sort(compare);
        }
        this.setState({sorting: "Name"});
    },

    sortByDate : function(bins,selected) {
        function compare(a,b) {
            return b.LatestTimestamp - a.LatestTimestamp;
        }
        if (selected == "My Databins") {
            bins.Creator.sort(compare);
        }
        else if (selected == "Recent Databins") {
            bins.Contributor.sort(compare);
        }
        else {
            bins.SharedWithMe.sort(compare);
        }

        this.setState({sorting: "Date"});
    },

    sortByOwner: function(bins,selected) {
        function compare(a,b) {
            if (a.Owner < b.Owner) {
                return -1;
            }
            if (a.Owner > b.Owner) {
                return 1;
            }
            return 0;
        }
        if (selected == "My Databins") {
            bins.Creator.sort(compare);
        }
        else if (selected == "Recent Databins") {
            bins.Contributor.sort(compare);
        }
        else {
            bins.SharedWithMe.sort(compare);
        }
        this.setState({sorting: "Owner"});
    },

    sortBySize: function(bins,selected) {
        function compare(a,b) {
            return b.Size - a.Size;
        }
        if (selected == "My Databins") {
            bins.Creator.sort(compare);
        }
        else if (selected == "Recent Databins") {
            bins.Contributor.sort(compare);
        }
        else {
            bins.SharedWithMe.sort(compare);
        }

        this.setState({sorting: "Size"});
    },

    refresh: function() {
        console.log("in refresh");
        this.forceUpdate();
    },

    render: function() {
        var rows = [];
        if (this.props.selected == "My Databins") {
            if (this.props.data.Creator) {
                this.props.data.Creator.forEach(function(bin) {
                    rows.push(<BinData data={bin} key={bin.UUID}/>);
                });
            };
        }
        else if (this.props.selected == "Recent Databins") {
            if (this.props.data.Contributor) {
                this.props.data.Contributor.forEach(function(bin) {
                    rows.push(<BinData data={bin} key={bin.UUID}/>);
                });
            };

        }
        else {
            if (this.props.data.SharedWithMe) {
                this.props.data.SharedWithMe.forEach(function(bin) {
                    rows.push(<BinData data={bin} key={bin.UUID}/>);
                });
            };
        }

        return (
            <section>
                {rows.length > 0 ?
                <table className="databins-list">
                    <thead>
                        <tr className="table-head">
                            <th className="head-names"><a className="sort descending" href="#" onClick={this.sortByName.bind(this,this.props.data, this.props.selected)}>Databin Name {this.state.sorting == "Name" ? <span className="triangle-down"></span>: ""}</a></th>
                            <th className="head-ids">Databin ID</th>
                            <th className="head-dates"><a className="sort" href="#" onClick={this.sortByDate.bind(this,this.props.data,this.props.selected)}>Latest Entry {this.state.sorting == "Date" ? <span className="triangle-down"></span>:""}</a></th>
                            <th className="head-urls">Databin Url</th>
                            <th className="head-sizes"><a className="sort" href="#" onClick={this.sortBySize.bind(this,this.props.data,this.props.selected)}>Size {this.state.sorting=="Size" ? <span className="triangle-down"></span>:""}</a></th> 
                            <th className="head-owners"><a className="sort" href="#" onClick={this.sortByOwner.bind(this,this.props.data,this.props.selected)}>Owner {this.state.sorting=="Owner" ? <span className="triangle-down"></span>:""}</a></th>
                            <th className="head-actions"><a className="refresh" onClick={this.refresh.bind(this)}>Refresh databins <span className="wdd-icon-refresh"></span></a></th> 
                        </tr>
                    </thead>
                    <tbody> {rows} </tbody>
                </table> :
                <AdminZeroState selected={this.props.selected} />
                }
            </section>

        );

    }
});

有人知道为什么 DOM 中渲染的内容与 React 认为正在发生的情况不匹配吗？

Answer 1

我不确定为什么会发生此类问题，但我见过类似的重绘错误。我建议向表元素添加一个关键属性。每当键属性发生变化时，整个表都会重新渲染。这很有用，因为我认为问题来自于 React 和 DOM 与正在排序的事物不同步。如果每次排序时您的键值都会发生变化(例如，包括键名称中的排序类型)，那么我认为这会起作用。