如何通过持有名称来排序（在反应中）？

Question

import React from 'react';
import PropTypes from 'prop-types';
import Card from './Card';
import {isEqualStrings, isNull, isUndefined} from '../../../../common/Helpers';

class Level4 extends React.Component {
    state = {
        parents: [...this.props.parents.map(employee => ({...employee, toggled: true}))],
        children: [...this.props.children],
        mainView: true
    };

    drawChildren = (currentNode, employee, isFunctional) => {
        const $clickedNode = $(currentNode);
        const $clone = $clickedNode.clone();
        const $parentSection = $clickedNode.closest('section');
        const $parentNodes = $parentSection.find('.org-structure-grid:first-child .org-structure-grid__item .org-structure-card');
        const $childNodes = $parentSection.find('.org-structure-grid:last-child .org-structure-grid__item .org-structure-card');
        const $gridNodesCount = $parentSection.find('.org-structure-grid');
        const parentNodesCount = $parentNodes.length;
        let offsetLeft = ($parentSection.innerWidth() / 2) - ($clickedNode.innerWidth() / 2) - 1;

        $parentNodes.hide();

        $('#shareholders').css({
            opacity: '0'
        });
        $('#level-2').css({
            opacity: '0'
        });
        $('#level-3').css({
            opacity: '0'
        });

        if (parentNodesCount <= 1) {
            $clickedNode.hide();
        }

        if ($childNodes.length) {
            $childNodes.fadeOut(300);
        }

        $clickedNode.parent().append($clone);

        const css = {position: 'absolute'};
        const animate = {left: offsetLeft, top: 16};

        if (this.state.mainView) {
            css.position = 'fixed';

            animate.top = 125;
            animate.left = (($(window).outerWidth() / 2) - ($clone.outerWidth() / 2)) - 16;
        }

        $clone.css(css).animate(animate, 500, () => {
            $('#shareholders').css({opacity: '1'}).hide();
            $('#level-2').css({opacity: '1'}).hide();
            $('#level-3').css({opacity: '1'}).hide();

            $clone.remove();
            $parentNodes.show();

            if (parentNodesCount <= 1) {
                $clickedNode.show();
            }

            this.setState({
                parents: [{
                    ...employee,
                    isFunctional,
                    toggled: true,
                    administrativeChildrenCount: this.props.getChildrenCount(employee.personId),
                    functionalChildrenCount: this.props.getChildrenCount(employee.personId, true),
                }],
                children: this.props.getChildren(employee.personId, isFunctional),
                mainView: false
            }, () => {
                $childNodes.fadeIn(300);
            });
        });
    };

    drawParent = (currentNode, employee, isFunctional) => {
        let {mainView} = this.state;
        const {parents: propsParents} = this.props;
        const $clickedNode = $(currentNode);
        const $clone = $clickedNode.clone();
        const $parentSection = $clickedNode.closest('section');
        const clickNodePositions = $clickedNode.position();
        let offsetLeft = ($parentSection.innerWidth() / 2) - ($clickedNode.innerWidth() / 2) - 1;

        $clone.css({
            position: 'absolute',
            top: 16,
            left: offsetLeft
        });

        $parentSection.append($clone);

        const personId = employee[isFunctional ? 'functionalHeadId' : 'administrativeHeadId'];

        const parents = [];
        let children = [];

        const isParent = _.findIndex(propsParents, item => !isNull(item.code) && isEqualStrings(item.code, employee.code)) > -1;

        if (isParent) {
            propsParents.map(item => parents.push({...item, toggled: true}));

            children = [...this.props.children];

            mainView = true;
        } else {
            let parentEmployee = _.find(propsParents, item => isEqualStrings(item.personId, personId));

            if (!parentEmployee) {
                parentEmployee = this.props.getEmployee(personId);
            }

            parents.push({
                ...parentEmployee,
                isFunctional,
                toggled: true,
                administrativeChildrenCount: this.props.getChildrenCount(personId),
                functionalChildrenCount: this.props.getChildrenCount(personId, true)
            });

            children = this.props.getChildren(personId, isFunctional);
        }

        if (isParent) {
            $('#shareholders').slideDown(300);
            $('#level-2').slideDown(300);
            $('#level-3').slideDown(300);
        }

        this.setState({
            mainView,
            parents,
            children,
        }, () => {
            const $parentNode = $(`#level-4-${employee[isFunctional ? 'functionalHeadId' : 'administrativeHeadId']}`);
            const $clickedEmployeeNode = $(`#level-4-${employee.personId}`);
            const positions = $clickedEmployeeNode.position();

            $parentNode.find('.org-structure-card').hide();
            $clickedEmployeeNode.find('.org-structure-card').hide();

            setTimeout(() => {
                $parentNode.find('.org-structure-card').fadeIn(300);
            }, 200);

            $clone.animate({left: positions.left + 16, top: positions.top + 16}, 500, () => {
                $clone.remove();

                $clickedEmployeeNode.find('.org-structure-card').show();
            });
        });
    };

    render() {
        const {parents, children} = this.state;

        return (
            <div id="level-4">
                {/*<div className="uk-text-right uk-margin-small-bottom">
                    <span style={{
                        fontSize: 12,
                        lineHeight: '16px',
                        color: '#BCBBC1',
                        fontWeight: 500
                    }}>Уровень 4</span>
                </div>*/}
                <section className="uk-position-relative">
                    <div className="org-structure-grid">
                        {parents.map(employee => (
                            <div id={`level-4-${employee.personId}`} key={`level-4-${employee.personId}`}
                                     className="org-structure-grid__item">
                                <Card employee={{...employee}}
                                            drawChildren={this.drawChildren}
                                            drawParent={this.drawParent}
                                            toggled={employee.toggled}/>
                            </div>
                        ))}
                    </div>
                    <div className="org-structure-grid">
                        {children.length ? children.map(employee => (
                            <div id={`level-4-${employee.personId}`} key={`level-4-${employee.personId}`}
                                     className="org-structure-grid__item">
                                <Card employee={{...employee}}
                                            drawChildren={this.drawChildren}
                                            drawParent={this.drawParent}
                                            toggled={false}/>
                            </div>
                        )) : null}
                    </div>
                </section>
            </div>
        );
    }
}

Level4.propTypes = {
    parents: PropTypes.arrayOf(PropTypes.object).isRequired,
    getChildrenCount: PropTypes.func,
    getChildren: PropTypes.func,
    getEmployee: PropTypes.func
};

export default Level4;

你好！谢谢您的关注！我的任务是创建按名称排序。在此卡片上的员工组件中，我具有employee.holding，并且我想按持有人姓名排序？ Structure and holding name

您可以看到持有测试名称，现在这些数组没有任何排序（

children = children.concat().sort((a,b) => (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0)).reverse();

我在渲染器中测试了此代码，但并没有帮助我（