时间戳

首页 > 解决方案 > 使用（Material-ui + React Redux + SSR 中的 Next.js）重新渲染未更新传递的属性

redux - 使用（Material-ui + React Redux + SSR 中的 Next.js）重新渲染未更新传递的属性

问题描述

嗨，我不确定这是否是错误，或者如果有人可以帮助我，我将不胜感激。

我在 SSR 中使用了带有 Material-UI 和 React Redux / Redux 的 Next.js v10+。实际上我有一个 Redux Prop 传递给 useStyles：

const extended = useSelector(state => state.someStore.extended);
const classes = useStyles({
    extended
});

并在 makeStyles 中使用：

toolbar: {
    height: props => props.extended ? 180 : 600
}

当更新“扩展”的事件时，会发生重新渲染。但是，“扩展”保留了旧值 180 而不是 600。

以上在开发模式下很好，但在 SSR 中存在问题。我尝试在 SSR 中使用样式组件，它按预期工作。

我错过了 Material UI + Redux + SSR 中的一些配置吗？非常感谢。

标签： reduxreact-reduxmaterial-uinext.jsserver-side-rendering

解决方案

Redux/React Redux 很好。我必须使用 clsx 来解决问题。

（以下代码均为 Next.js SSR 的案例）

案例1（有效！）：

<Toolbar className={clsx(classes.toolbar, expanded && classes.expanded)} />
const useStyles = makeStyles(theme => ({
    toolbar: {
        height: 180
    },
    expanded: {
        height: 600
    }
}));

案例2（它不起作用！（我的原创作品）：

const classes = useStyles({ expanded });
<Toolbar className={classes.toolbar} />
const useStyles = makeStyles(theme => ({
    toolbar: {
        height: props => props.expanded ? 600 : 180
    }
}));

案例 3（它有效！）：虽然像这样使用样式组件很好：

<Toolbar expanded={expanded} />
const Toolbar = styled.div`
    height: ${props => props.expanded ? '600px' : '180px'};
`;

推荐阅读