如何在 React 应用中添加动态标题
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
在这篇文章中，我将向您展示如何创建一个简单的组件，为您的 Web 应用程序添加动态标题行为。
这里有一个包含适用示例的仓库：GitHub 仓库
恢复
- 添加
react-helmet依赖项。 - 编写标题的动态组件。
- 将动态组件添加到您的路由器或页面中。
添加react-helmet依赖项。
如果你正在使用yarn
$ yarn add react-helmet
如果你正在使用npm
$ npm i react-helmet
编写标题的动态组件。
你可以为这个例子编写一个独立的组件，像这样：
// TitleComponent.jsx
import React from 'react';
import Helmet from 'react-helmet';
const TitleComponent = ({ title }) => {
var defaultTitle = '⚛️ app';
return (
<Helmet>
<title>{title ? title : defaultTitle}</title>
</Helmet>
);
};
export { TitleComponent };
在这个例子中，我们编写了一个独立的组件，它可以接收一个标题，如果你没有发送prop标题，则标题将是默认标题。
将动态组件添加到您的路由中。
我们提供了多种方法将此组件添加到您的应用程序中，这主要取决于您对路由的选择（如果您使用 Gatsby 或 Next.js，则可以避免配置路由器；但如果您使用 create-react-app 或 react-boiler 模板，则可以将其添加到您的路由器中）。
将此组件添加到您的路由中（使用路由器）：
// routes.js
import React from 'react';
import { Route } from 'react-router';
import { TitleComponent } from './TitleComponent.jsx';
// withTitle function
const withTitle = ({ component: Component, title }) => {
return class Title extends Component {
render() {
return (
<React.Fragment>
<TitleComponent title={title} />
<Component {...this.props} />
</React.Fragment>
);
}
};
};
// Example pages
const Index = () => <h1>This is the IndexComponent!</h1>;
const Persons = () => <h1>This is the PersonsComponent!</h1>;
const Dogs = () => <h1>This is the DogsComponent!</h1>;
const Food = () => <h1>This is the FoodComponent!</h1>;
// Adding title
const IndexComponent = withTitle({ component: Index, title: 'Index' });
const PersonsComponent = withTitle({ component: Persons, title: '🧠 Persons' });
const DogsComponent = withTitle({ component: Dogs, title: '🐶 Dogs' });
const FoodComponent = withTitle({ component: Food, title: '🌮 Food' });
// Your router
export default (
<Route>
<Route path="/" component={IndexComponent} />
<Route path="/persons" component={PersonsComponent} />
<Route path="/dogs" component={DogsComponent} />
<Route path="/food" component={FoodComponent} />
</Route>
);
将此组件添加到您的页面（使用 Next.js、Gatsby、After.js）：
使用withTitle函数：
// pages/pageOne.jsx
import React from 'react';
import { TitleComponent } from './TitleComponent.jsx';
// withTitle function
const withTitle = ({ component: Component, title }) => {
return class Title extends Component {
render() {
return (
<React.Fragment>
<TitleComponent title={title} />
<Component {...this.props} />
</React.Fragment>
);
}
};
};
const PageOne = () => (
<React.Fragment>
<h1> Page 1 </h1>
// Some content...
</React.Fragment>
);
export default withTitle({ component: PageOne, title: 'Page One!' });
直接添加<TitleComponent />到您的页面：
// pages/pageOne.jsx
import React from 'react';
import { TitleComponent } from './TitleComponent.jsx';
const PageOne = () => (
<React.Fragment>
<TitleComponent title="Page One!" />
<h1> Page 1 </h1>
// Some content...
</React.Fragment>
);
export default PageOne;
这里有一个包含适用示例的仓库：GitHub 仓库
就这些了。感谢阅读，祝您编程愉快！
文章来源：https://dev.to/luispa/how-to-add-a-dynamic-title-on-your-react-app----3l0j