reactjs - React 组件在重新渲染时滚动回顶部

Question

我的 React 组件有这个问题，我无法弄清楚。每次重新渲染时它都会滚动回顶部。而且，我无法弄清楚为什么它首先要重新渲染。基本上我有一个祖 parent ， parent 和孙子组件。孙子有一个点击事件，显示祖 parent 的另一个 child ，如果这有任何意义的话。该 click 事件做了一些事情，但它会导致祖父组件的重新渲染，从而导致父组件滚动到顶部。我将添加我的代码，希望能澄清我在这里所说的内容。只是想提供一些背景信息。
所以主要问题是滚动到顶部。如果我们能弄清楚它为什么要重新渲染并停止它，那就太好了。
祖 parent (StaticLine.js):

import React, { useEffect, useState } from 'react';
import StaticOrderColumn from '../ordercolumn/StaticOrderColumn';
import { useGlobalLineTypeActionsContext } from '../../context/GlobalLineTypeContext';
import Details from '../details/DetailsColumn';
import { ModalStyles } from '../modals/ModalStyles';
import {
    useScheduleActionsContext,
    useScheduleContext
} from '../../context/ScheduleContext';
import PalletCount from './PalletCount';
import OrderButtons from './OrderButtons';
import PropTypes from 'prop-types';
import {
    useGlobalShowDetailsActionsContext,
    useGlobalShowDetailsContext
} from '../../context/GlobalShowDetailsContext';
import { useTraceUpdate } from '../../utils/hooks';

const StaticLine = (props) => {
    useTraceUpdate(props);
    console.log('top of StaticLine');
    const { type, setTitle } = props;

    const { orderType, orders } = useScheduleContext();
    const { setOrders, setOrderType } = useScheduleActionsContext();
    const setGlobalLineType = useGlobalLineTypeActionsContext();
    const showDetails = useGlobalShowDetailsContext();
    const setShowDetails = useGlobalShowDetailsActionsContext();

    const [lineID, setLineID] = useState(-1);
    const [lineTitle, setLineTitle] = useState('');
    const [highlightDest, setHighlightDest] = useState(false);

    const ordersCol = React.useRef();

    let lineCountOffset = 0;
    let numLines = 4;
    let pageTitle = '';
    switch (type) {
        case 'bagline':
            pageTitle += 'Bag Lines';
            break;
        case 'toteline':
            pageTitle += 'Tote Lines';
            lineCountOffset = 10;
            break;
        case 'otherline':
            pageTitle += 'Other Lines';
            numLines = 3;
            lineCountOffset = 4;
            break;
        default:
    }

    useEffect(() => {
        setLineID(-1);
    }, [type]);

    const globalLineType = type + 's';
    useEffect(() => {
        setGlobalLineType(globalLineType);
        setTitle(pageTitle);
        const title = `${process.env.REACT_APP_BASE_TITLE ||
            'title'} - ${pageTitle}`;
        document.title = title;
    }, [type, setGlobalLineType, pageTitle, setTitle, globalLineType]);

    const selectLine = (e) => {
        setShowDetails(false);
        setHighlightDest(false);
        const lineNum = e.target.value.substring(4);
        setLineID(parseInt(lineNum, 10));
        setLineTitle(
            orderType.charAt(0).toUpperCase() +
                orderType.slice(1) +
                ' Orders - Line ' +
                parseInt(lineNum, 10)
        );
    };

    const selectOrderType = (e) => {
        const selectedOrderType = e.target.value;
        setOrderType(selectedOrderType);
        setShowDetails(false);
        setLineTitle(
            selectedOrderType.charAt(0).toUpperCase() +
                selectedOrderType.slice(1) +
                ' Orders - Line ' +
                lineID
        );
    };

    const OrderColWithRef = React.forwardRef((props, ref) => (
        <StaticOrderColumn
            {...props}
            title={lineTitle}
            lineID={lineID}
            orders={orders}
            ref={ref}
        />
    ));

    return (
        <div
            className={`staticLines p-1 no-gutters d-flex flex-nowrap${
                orderType === 'completed' ? ' completed' : ''
            }`}
        >
            <div className={'radio-col no-border'}>
                <div className={'radio-container p-2'}>
                    <div className={'radios'}>
                        // lots of irrelevant code here
                    </div>
                </div>
            </div>
            {lineID > -1 && (
                <>
                    <div
                        className={'col lines no-gutters order-col'}
                    >
                        <OrderColWithRef ref={ordersCol} />
                    </div>
                    <div className={'col row lines no-gutters order-details'}>
                        <Details
                            setOrders={setOrders}
                            orders={orders || []}
                            customStyles={ModalStyles}
                            highlightDest={highlightDest}
                            setHighlightDest={setHighlightDest}
                            errLocation={'top-center'}
                        />
                        {orderType === 'completed' && showDetails && (
                            <OrderButtons
                                setLineID={setLineID}
                                setOrders={setOrders}
                                orders
                                lineNum={lineID}
                            />
                        )}
                    </div>

                    <div className={'col lines no-gutters d-flex no-border'}>
                        {orderType === 'scheduled' && (
                            <PalletCount
                                type={'Bag'}
                                lineNum={lineID}
                                orders={orders}
                                setTitle={setTitle}
                                setHighlightDest={setHighlightDest}
                            />
                        )}
                    </div>
                </>
            )}
        </div>
    );
};

StaticLine.propTypes = {
    type: PropTypes.string.isRequired,
    orders: PropTypes.array,
    setTitle: PropTypes.func.isRequired
};

export default StaticLine;

父(StaticOrderColumn.js):

import React from 'react';
import PropTypes from 'prop-types';
import StaticOrder from '../order/StaticOrder';
import '../../scss/App.scss';
import { useGlobalSpinnerContext } from '../../context/GlobalSpinnerContext';

const StaticOrderColumn = (props) => {
    const { title, lineID, orders } = props;

    const isGlobalSpinnerOn = useGlobalSpinnerContext();

    const sortedOrdersIDs = orders
        .filter((o) => o.lineNum === lineID)
        .sort((a, b) => a.linePosition - b.linePosition)
        .map((o) => o.id);

    return (
        <div id={'line-0'} className={'col order-column'}>
            <header className={'text-center title'}>
                {title}{' '}
                {sortedOrdersIDs.length > 0 && (
                    <span> ({sortedOrdersIDs.length})</span>
                )}
            </header>
            <div className={'orders'}>
                {orders &&
                    sortedOrdersIDs &&
                    sortedOrdersIDs.map((orderID, index) => {
                        const order = orders.find((o) => o.id === orderID);
                        return (
                            <StaticOrder
                                key={orderID}
                                order={order}
                                index={index}
                            />
                        );
                    })}
                {!sortedOrdersIDs.length && !isGlobalSpinnerOn && (
                    <h3>There are no orders on this line.</h3>
                )}
            </div>
        </div>
    );
};

StaticOrderColumn.propTypes = {
    title: PropTypes.string.isRequired,
    lineID: PropTypes.number.isRequired,
    orders: PropTypes.array.isRequired,
    ref: PropTypes.instanceOf(Element).isRequired
};

export default StaticOrderColumn;

这个文件是点击事件发生的地方，它会导致重新渲染 StaticLine 并滚动到顶部以获取 StaticOrderColumn。
孙子(StaticOrder.js):

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import '../../scss/App.scss';
import { getFormattedDate } from '../../utils/utils';
import { useGlobalActiveOrderActionsContext } from '../../context/GlobalActiveOrderContext';
import { useGlobalShowDetailsActionsContext } from '../../context/GlobalShowDetailsContext';
// import { stringTrunc } from '../../utils/utils';

const MyOrder = styled.div`
    background-color: #193df4;
    transition: background-color 1s ease;
`;

const devMode = true;
// const devMode = false;

const StaticOrder = (props) => {
    const {
        id,
        item,
        desc,
        cust,
        palletsOrd,
        bagID,
        chemicals,
        totalBagsUsed,
        linePosition,
        palletsRem,
        palletCount,
        requestDate,
        orderNumber,
        comments
    } = props.order;

    const setActiveOrder = useGlobalActiveOrderActionsContext();
    const setShowDetails = useGlobalShowDetailsActionsContext();

    const orderID = id + '';

    // show the details section when user clicks an order
    // THIS IS WHERE THE ISSUE IS HAPPENING, WHEN THE ORDER IS CLICKED,
    // THIS FUNCTION RUNS AND THE StaticLine COMPONENT RE-RENDERS AND THE StaticOrderColumn SCROLLS TO THE TOP
    const showDetails = (orderID) => {
        setActiveOrder(parseInt(orderID, 10));
        setShowDetails(true);
    };

    return (
        <MyOrder
            id={orderNumber}
            className={'order static'}
            onClick={(e) => showDetails(orderID, e)}
        >
            {/*<div className={'orderID'}>{id}</div>*/}
            <p className={'item-number'}>
                {item !== '' ? `Item Number: ${item}` : ''}
            </p>
            <p>{desc !== '' ? `NPK: ${desc}` : ''}</p>
            <p>{cust !== '' ? `Customer: ${cust}` : ''}</p>
            <p>
                {palletsOrd !== '' ? `Pallets Ordered: ${palletsOrd}` : ''}
            </p>
            <p>{bagID !== '' ? `Bag ID: ${bagID}` : ''}</p>
            <p>{chemicals !== '' ? `Chemical : ${chemicals}` : ''}</p>
            <p>
                {requestDate !== ''
                    ? `Request Date: ${getFormattedDate(new Date(requestDate))}`
                    : ''}
            </p>
            {devMode && (
                <>
                    <div className={'id-line-num-pos'}>
                        <p>OrderID: {orderNumber}</p>
                    </div>
                </>
            )}
            <div className={'total-bags'}>Total Bags: {totalBagsUsed}</div>
            <div className={'pallets-remaining'}>
                Pallets Left: {palletsRem}
            </div>
            <div className={'pallets-done'}>
                Pallets Done: {palletCount}
            </div>
            <div className={'line-position'}>{linePosition + 1}</div>
            {comments.length > 0 && (
                // bunch of SVG code
            )}
        </MyOrder>
    );
};

StaticOrder.propTypes = {
    order: PropTypes.object,
    id: PropTypes.number,
    index: PropTypes.number,
    title: PropTypes.string,
    orderID: PropTypes.string
};

export default StaticOrder;

编辑:我正在添加问题的图片，以帮助大家也将其形象化。订单框位于此图像的左侧。默认情况下，“订单详细信息”是隐藏的。单击左侧的订单时，它会将订单加载到订单详细信息中并显示该组件。发生这种情况时，左侧的订单列会滚动回顶部。在后续订单点击时，它不会滚动到顶部。只有当它显示或隐藏“订单详细信息”时，它才会滚动回顶部。

编辑 2:我想知道我是否取出 const showDetails = useGlobalShowDetailsContext();行和对 showDetails 的 2 个引用在StaticLine.js 之外，这个问题就消失了。因此，如果这有助于任何人弄清楚...
编辑 3:我慢慢地向前走。我想出了如何删除对 showDetails 的引用之一在 StaticLine.js文件。现在，如果有人能帮我弄清楚如何从该组件中获取最后一个引用，但保留功能，那将是惊人的!!
提醒一下，这是我正在谈论的引用:

{orderType === 'completed' && showDetails && (
  <OrderButtons
    setLineID={setLineID}
    setOrders={setOrders}
    orders
    lineNum={lineID}
  />
)}

如果需要更多信息或更多代码，请告诉我。任何见解将不胜感激。

Answer 1

const OrderColWithRef = React.forwardRef((props, ref) => (
        <StaticOrderColumn
            {...props}
            title={lineTitle}
            lineID={lineID}
            orders={orders}
            ref={ref}
        />
    ));

将此移到 StaticLine 之外作为顶级功能。
发生了什么
当只有部分 Dom 发生变化时，React 足够聪明，可以避免重新创建 html 元素和安装内容。如果只有一个 prop 改变，它会保留元素并改变它的值等。这是通过比较 element.type 来完成的。 .
您正在有效地做的是创建一个新的 OrderColWithRef每个渲染上的函数，因为它是一个局部函数，所以类型不相等。每次在 StaticLine 中发生任何事情时，React 都会卸载并重新装载一个新的 html 元素。变化。
永远不要嵌套组件声明。在函数内声明组件有效的唯一情况是 HOC，即使这样，HOC 函数本身也不是有效元素，只有它的返回值才是。
希望这能解决问题。