Динамический заголовок страницы с ReactJS

Я хочу сделать заголовок динамической страницы на ReactJS. Пробую много чего, но не получается. Я делаю массив с данными:

let pageTitles = [
    {key:"/Home", title:"Welcome Home"},
    {key:"/SecondPage", title:"Shop"},
    {key:"/ThirdPage", title:"ContactUs"},
];

В html есть только <title></title> , я использую let pathname = window.location.pathname; Если он возвращает "/Home" или "/ThirdPage", чтобы динамически установить новый заголовок. Я пробовал что-то вроде этого:

for (var i = 0, len = pageTitles.length; i < len; i++) {
        if (pageTitles[i].key === pathname) {
            var hhh = pageTitles[i].text;
        }
    }
document.title = hhh

Но явно не сработало. Извините, если есть такая тема, но я ее не нашел. У меня есть ограничение на установку модулей.


reactjs javascript dynamic title
person dist    schedule 18.11.2019    source источник
comment
это может помочь   -  person Juviro    schedule 18.11.2019
comment
Забыл написать, что у меня есть ограничение на установку модулей. Извини   -  person dist    schedule 18.11.2019
comment
Возможный дубликат Как вы устанавливаете заголовок документа в React?< /а>   -  person Emile Bergeron    schedule 18.11.2019

Ответы (1)


arrow_upward
8
arrow_downward

Если вам нужно избежать установки модулей, вы можете сделать это как вспомогательный файл, а затем просто импортировать его в нужный модуль и вызвать componentDidMount

export function seo(data = {}) {
  data.title = data.title || 'Default title';
  data.metaDescription = data.metaDescription || 'Default description';

  document.title = data.title;
  document.querySelector('meta[name="description"]').setAttribute('content', data.metaDescription);
}

import React from 'react';
import {seo} from '../helpers/seo';

export default class SomeClass extends Component {
  constructor(props) {
    super(props);
  };

  componentDidMount() {
    seo({
      title: 'This is my title only shown on this page',
      metaDescription: 'With some meta description'
    });
  }

  render() {
    return <h1>Hello World</h1>;
  }
}

Вы также можете просто вызвать document.title = 'My new title' напрямую в любом месте, но если вы извлечете его как функцию, у вас будет возможность использовать функцию по умолчанию и просто предоставить переопределение, когда захотите.

Изменить: после проверки вашего кода, если вы измените hhh = pageTitles[i].text; на hhh = pageTitles[i].title;, он будет работать. Было бы неплохо объявить var вне цикла. Также было бы неплохо иметь значение по умолчанию.

person Miroslav Saracevic    schedule 18.11.2019