时间戳

首页 > 解决方案 > 如何使用反应功能组件更改 html 元标记

reactjs - 如何使用反应功能组件更改 html 元标记

问题描述

我有一个简单的反应应用程序，我正在尝试更改生成的 html 的元标记。我阅读了有关React Helmet的内容，但其中的示例是针对类而不是针对函数的。知道如何使用功能组件来做到这一点吗？

function App() {
  return (
    <Router>
      <div>
        <Nav />
        <Route path="/food/" exact component={Home} />
        <Route path="/food/food/" component={Food} />
        <Route path="/food/new-food/" component={NewFood} />
      </div>
    </Router>
  );
}

根据 Ricin 的回复更新：

import React from 'react'
import { BrowserRouter as Router, Route} from "react-router-dom";
import './App.css'
import Nav from './components/nav'
import Home from './components/home'
import Food from './components/food'
import NewFood from './components/new-food'
import {Helmet} from "react-helmet";

function App() {
  return (
    <Router>
      <Helmet>
        <title>Food</title>
        <meta name="description" content="Calorie Calculator" />
      </Helmet>
      <div>
        <Nav />
        <Route path="/food/" exact component={Home} />
        <Route path="/food/food/" component={Food} />
        <Route path="/food/new-food/" component={NewFood} />
      </div>
    </Router>
  );
}

export default App

（2019 年 8 月 27 日）这是基于 Ricin 的回复的另一个更新：我将 Helmet 代码添加到 Home 组件而不是 App：

  const foods = getFoodFromDB()
  const ate = getAteFromDB()

  return (
    <div>
      <Helmet>
        <title>Food</title>
        <meta name="description" content="Calorie Calculator" />
      </Helmet>
      <Ate ate={ate} />
      <Food food={foods} />
    </div>
  )
}

不幸的是，我仍然在描述元标记中看到两个条目。

标签： reactjsmeta

解决方案

这是一个工作示例，它有 2 个页面，并且都有 2 个不同的 Helmet 组件元标记，您可以检查它们：https ://codesandbox.io/s/floral-haze-2kqum

在您的功能组件中导入头盔，然后将您想要的部分包装在其中，与类与功能组件无关

import {Helmet} from "react-helmet";

我的意思是在Home、Food和NewFood组件内部使用。

所以你的 Home 组件看起来像：

import React from 'react';
import Helmet from 'react-helmet';

let Home = React.createClass({
    render: function() {
        return (
            <div>
                <Helmet
                    title="Home"
                    meta={[
                        {property: 'og:title', content: 'Home'},
                        // Any other meta tags go here as objects or you can just add children directly inside this component.
                    ]} />
                <h1>Home</h1>
            </div>
        );
    }
});

export default Home;

以下是您可以使用的更多示例：https ://github.com/mattdennewitz/react-helmet-example

推荐阅读