reactjs 将折叠面板滚动到视图中并在页面加载时打开

qyzbxkaa  于 2022-11-29  发布在  React
关注(0)|答案(1)|浏览(155)

我有一个带有折叠式的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>
            ))}
}

包含所需行为的页面。

9avjhtql

9avjhtql1#

当打开为什么选择我们页面时,请使用scrollIntoViewhttps://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView在屏幕上显示折叠式。
然后将折叠面板的expanded属性设置为truehttps://mui.com/material-ui/api/accordion/
关于点击一个链接你应该使用useEffecthook来确定组件的初始化和内部回调使用上面的方法。

相关问题