Question

我试图弄清楚在更改了类列表所依赖的状态值后如何重新渲染组件。我假设是因为它不是组件的直接属性，所以不会为我重新渲染。

当showDetails状态变量更改时，我想重新呈现的“我的详细信息”组件：

import React, { useContext } from 'react';
import { ScheduleContext } from '../../schedule-context';

const Details = () => {
    const showDetails = useContext(ScheduleContext).showDetails;
    const className =
        'col details-col' + (showDetails ? '' : ' d-none');

    return <div className={className}>details...</div>;
};

export default Details;

该状态变量设置在其他组件中，该组件本质上是Details组件的一个姨妈/叔叔：

订单组件部分代码：

const toggleDetails = () => {
        setShowDetails((showDetails) => !showDetails);
    };

    return (
        <Draggable draggableId={orderID} index={props.index}>
            {(provided, snapshot) => (
                <MyOrder
                    className={'order'}
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    isDragging={snapshot.isDragging}
                    onClick={toggleDetails}

从我的阅读中，强迫重新渲染组件是令人讨厌的。因此，我假设有一种方法可以在更新该状态变量时自动将其完全重新渲染。

Answer 1

来自Details父母

import React, { useContext } from 'react';
import { ScheduleContext } from '../../schedule-context';

const SmartComponent = () => {
    const showDetails = useContext(ScheduleContext).showDetails;

    return <Details showDetails />;
};

export default Details;


// Dumb component
const Details = ({ showDetails }) => {
    const className = 'col details-col' + (showDetails ? '' : ' d-none');

    return <div className={className}>details...</div>;
};

拥有处理笨拙组件的智能组件是一个很好的习惯

ReactJS-从一个组件切换一个类，强制另一个组件重新渲染

1 个答案: