背景

前几天，一个同事过来问我，他的Title不想自动变化，想保持固定的值，该怎么办？

我之前没有考虑过这个问题，因为我们是使用ProLayout进行页面框架的构建，所以不需要去关心页面的Title，一直都是根据路由动态生成的。今天看一下，ProLayout是如何控制网页Title进行变化的。

ProLayout是啥？

ProLayout 是一个基于 Ant Design 的前端框架，用于构建企业级应用的布局和导航。它提供了一个灵活的页面Title组件，可以根据当前的页面状态动态改变。

如何改变Title

要动态改变页面Title，可以在 ProLayout 的 Page 组件中使用 title 属性，并将其绑定到页面的状态。例如，假设有一个名为 currentPageTitle 的页面状态，可以将其绑定到 Page 组件的 title 属性，如下所示：

import React from 'react';
import ProLayout from '@ant-design/pro-layout';

function App() {
 const [currentPageTitle, setCurrentPageTitle] = React.useState('');

 // ...其他代码

 return (
   <ProLayout title={currentPageTitle}>
     {/* 页面内容 */}
   </ProLayout>
 );
}

export default App;

在上面的示例中，我们使用 useState Hook 创建了一个名为 currentPageTitle 的页面状态，并将其绑定到 ProLayout 组件的 title 属性。当 currentPageTitle 发生变化时，页面Title 会自动更新。

扩展

还可以使用其他状态管理库（如 Redux、MobX 等）来管理页面状态，并将它们绑定到 ProLayout 组件的 title 属性。

总之，ProLayout 可以根据页面的状态动态改变页面Title，从而使页面更具灵活性和可读性。

PS：如果有需要补充的内容，请在评论区留言

转载时请注明“来自掘金 - EvenZhu”