我有一个带有折叠式的FAQ页面。我想要的行为是,例如,当用户单击指向localhost:3000/faq#why-choose-us
的链接时,页面应该滚动到带有why-choose-usid的折叠式元素并打开折叠式。目前,如果我已经在FAQ上并单击某个问题,它会将URL设置为localhost:3000/faq#title-of-question
并打开折叠式。但当单击指向此处的链接时却不会。代码如下:
{data.elements
.map((feature, index) => (
<Accordion
id={`${feature.slug}`}
key={index}
>
<a style={{ all: 'unset' }} href={`#${feature.slug}`}>
<AccordionSummary
expandIcon={<Iconify icon={ExpandMoreIcon} />}
aria-controls={`panel-content-${index}`}
id={`panel-header-${index}`}
>
<Typography sx={{ fontWeight: 600 }}>{feature.title}</Typography>
</AccordionSummary>
</a>
<AccordionDetails>
<Typography>{feature.description}</Typography>
</AccordionDetails>
</Accordion>
))}
}
包含所需行为的页面。
1条答案
按热度按时间9avjhtql1#
当打开为什么选择我们页面时,请使用scrollIntoView:https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView在屏幕上显示折叠式。
然后将折叠面板的expanded属性设置为true:https://mui.com/material-ui/api/accordion/
关于点击一个链接你应该使用useEffecthook来确定组件的初始化和内部回调使用上面的方法。