web-dev-qa-db-ja.com

Reactでドキュメントのタイトルをどのように設定しますか？

Reactアプリケーションのドキュメントタイトル（ブラウザーのタイトルバー）を設定したい。 react-document-title （時代遅れのようです）を使用して、constructorおよびcomponentDidMount()にdocument.titleを設定しようとしました-これらのソリューションはいずれも動作しません。

javascriptreactjsdom
44
eli

React Helmet を使用できます。

import React from 'react'
import { Helmet } from 'react-helmet'

const TITLE = 'My Page Title'

class MyComponent extends React.PureComponent {
  render () {
    return (
      <>
        <Helmet>
          <title>{ TITLE }</title>
        </Helmet>
        ...
      </>
    )
  }
}
31
quotesBro
import React from 'react'
import ReactDOM from 'react-dom'


class Doc extends React.Component{
  componentDidMount(){
    document.title = "dfsdfsdfsd"
  }

  render(){
    return(
      <b> test </b>
    )
  }
}

ReactDOM.render(
  <Doc />,
  document.getElementById('container')
);

これは私のために動作します。

編集：webpack-dev-serverを使用している場合は、inlineをtrueに設定します

62
AlexVestin

「componentWillMount」のライフサイクルでドキュメントのタイトルを設定する必要があります。

componentWillMount() {
    document.title = 'your title name'
  },
8
Alvin

React 16.8の場合、 seEffect を使用して機能コンポーネントでこれを実行できます。

例えば：

useEffect(() => {
   document.title = "new title"
}, []);

2番目の引数を配列として使用すると、useEffectが1回だけ呼び出され、componentDidMountに似たものになります。

4
Jordan Daniels

React Portals は、実際のReactノードであるかのように、ルートReactノードの外の要素（<title>など）にレンダリングできます。これで、追加の依存関係なしに、タイトルをきれいに設定できます。

次に例を示します。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Title extends Component {
    constructor(props) {
        super(props);
        this.titleEl = document.getElementsByTagName("title")[0];
    }

    render() {
        let fullTitle;
        if(this.props.pageTitle) {
            fullTitle = this.props.pageTitle + " - " + this.props.siteTitle;
        } else {
            fullTitle = this.props.siteTitle;
        }

        return ReactDOM.createPortal(
            fullTitle || "",
            this.titleEl
        );
    }
}
Title.defaultProps = {
    pageTitle: null,
    siteTitle: "Your Site Name Here",
};

export default Title;

コンポーネントをページに配置し、pageTitleを設定するだけです。

<Title pageTitle="Dashboard" />
<Title pageTitle={item.name} />
4
Colonel Thirty Two

他の人が述べたように、document.title = 'My new title'と React Helmet を使用してページタイトルを更新できます。これらのソリューションはどちらも、スクリプトがロードされる前に最初の「React App」タイトルをレンダリングします。

create-react-appを使用している場合、initialドキュメントタイトルは<title>タグ/public/index.htmlファイルに設定されます。

これを直接編集するか、環境変数から入力されるプレースホルダーを使用できます。

/.env：

REACT_APP_SITE_TITLE='My Title!'
SOME_OTHER_VARS=...

何らかの理由で開発環境で別のタイトルが必要な場合-

/.env.development：

REACT_APP_SITE_TITLE='**DEVELOPMENT** My TITLE! **DEVELOPMENT**'
SOME_OTHER_VARS=...

/public/index.html：

<!DOCTYPE html>
<html lang="en">
    <head>
         ...
         <title>%REACT_APP_SITE_TITLE%</title>
         ...
     </head>
     <body>
         ...
     </body>
</html>

このアプローチは、グローバルprocess.envオブジェクトを使用して、アプリケーションからサイトタイトル環境変数を読み取ることができることも意味します。

console.log(process.env.REACT_APP_SITE_TITLE_URL);
// My Title!

参照： カスタム環境変数の追加

4
Gruffy

document.title = 'Home Page'で以下を使用できます

import React from 'react'
import { Component } from 'react-dom'


class App extends Component{
  componentDidMount(){
    document.title = "Home Page"
  }

  render(){
    return(
      <p> Title is now equal to Home Page </p>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

または、このnpmパッケージnpm i react-document-titleを使用できます

import React from 'react'
import { Component } from 'react-dom'
import DocumentTitle from 'react-document-title';


class App extends Component{


  render(){
    return(
      <DocumentTitle title='Home'>
        <h1>Home, sweet home.</h1>
      </DocumentTitle>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

ハッピーコーディング!!!

2
EsterlingAccime Youtuber

私はこれを徹底的にテストしていませんが、これはうまくいくようです。 TypeScriptで書かれています。

interface Props {
    children: string|number|Array<string|number>,
}

export default class DocumentTitle extends React.Component<Props> {

    private oldTitle: string = document.title;

    componentWillUnmount(): void {
        document.title = this.oldTitle;
    }

    render() {
        document.title = Array.isArray(this.props.children) ? this.props.children.join('') : this.props.children;
        return null;
    }
}

使用法：

export default class App extends React.Component<Props, State> {

    render() {
        return <>
            <DocumentTitle>{this.state.files.length} Gallery</DocumentTitle>
            <Container>
                Lorem ipsum
            </Container>
        </>
    }
}

他の人がアプリ全体を置くことに熱心である理由がわからない内部<Title>コンポーネント、それは私には奇妙に思えます。

render()内のdocument.titleを更新することにより、動的なタイトルが必要な場合は更新または最新の状態に維持されます。マウント解除されたときにもタイトルを元に戻す必要があります。ポータルはかわいいですが、不要なようです。ここでDOMノードを操作する必要はありません。

1
mpen

初心者の場合は、反応プロジェクトフォルダーのパブリックフォルダーに移動し、「index.html」のタイトルを編集して自分のものを置くことで、すべてのことから自分を救うことができます。保存することを忘れないでください。

0
Stanleynd

Jsファイルに関数を作成し、コンポーネントで使用するためにそれをエクスポートするだけです。

以下のように：

export default function setTitle(title) {
  if(typeof title !== "string")
     throw new Error("Title should be an string");
     document.title = title;
}

次のようなコンポーネントで使用します。

import React, { Component } from 'react';

import setTitle from './setTitle.js' // no need to js extension at the end


class App extends Component {

  componentDidMount() {
    setTitle("i am a new title");
  }

  render() {
    return (
      <div>
        see the title
      </div>
    );
  }
}

export default App
0
amin msh