下面的代码有条件地呈现一条警告消息,当用户切换网站(通过单击按钮,或直接使用URL访问)时,网站将显示一条警告消息,并在刷新时消失。
在docusaurus本地开发服务器中工作正常,但是一旦构建到生产静态站点中,行为就不同了。
import Cookies from 'js-cookie';
import React from 'react';
import { DocProvider } from '@docusaurus/theme-common/internal';
import { HtmlClassNameProvider } from '@docusaurus/theme-common';
import { translate } from '@docusaurus/Translate';
import CommunityLinkGroup from "@site/src/components/LinkGroup";
import DocItemLayout from '@theme/DocItem/Layout';
import DocItemMetadata from '@theme/DocItem/Metadata';
import styles from "./index.module.css";
export default function DocItem(props) {
const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
const MDXComponent = props.content;
const url = props.location.pathname;
const prevEdition = Cookies.get('doc_edition');
var displayAlert = false;
if (url.includes('/community/')) {
Cookies.set('doc_edition', 'community');
if (prevEdition == 'cloud') {
displayAlert = true;
}
} else if (url.includes('/cloud/')) {
Cookies.set('doc_edition', 'cloud');
if (prevEdition == 'community') {
displayAlert = true;
}
}
var alertMsg = "bad msg";
var alertClass = "badcls";
var alertRole = "badrole";
if (displayAlert == true) {
alertMsg = translate({
id: 'theme.DocItem.switchDocAlertMsg',
message: 'you just switched site, please notice.',
});
alertClass = "alert alert--warning";
alertRole = "alert";
}
console.log(alertMsg, alertClass, alertRole);
return (
<DocProvider content={props.content}>
<HtmlClassNameProvider className={docHtmlClassName}>
<div className={alertClass} role={alertRole}>{alertMsg}</div>
<DocItemMetadata />
<DocItemLayout>
<MDXComponent />
</DocItemLayout>
<div className={styles.communityLinkContainer}>
<CommunityLinkGroup />
</div>
</HtmlClassNameProvider>
</DocProvider>
);
}
在本地开发服务器中工作正常:
但一旦构建到生产静态站点中,它就会产生不可能的渲染结果:
同时生产现场控制台输出显示you just switched site, please notice. alert alert--warning alert
,明确表示alertMsg=='you just switched site, please notice.', alertClass=="alert alert--warning", alertRole=="alert"
,说明displayAlert
必须为true
。
但是如上面的屏幕截图所示,看起来displayAlert
同时是false
和true
,这是一种完全不可能的DOM状态。
此外,这种情况只发生在直接使用URL路径访问时,如果我点击网站提供的按钮来更改网站,网站警告消息将通过动态渲染正常显示。
1条答案
按热度按时间bqf10yzr1#
我应该使用状态变量,如https://stackblitz.com/edit/react-pcagrw?file=src/App.js,将其视为React 101。