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

107

Reactアプリケーションの（ブラウザーのタイトルバーにある）ドキュメントのタイトルを設定したいと思います。私が使って試してみまし反応し、ドキュメントのタイトルを（古くらしい）との設定document.titleにconstructorしてcomponentDidMount()-これらのソリューションの作品のどれも。

javascript  reactjs  dom 
— エリ
ソース
時代遅れ？@DanAbramov react-document-titleはReact16でもうまく機能すると思います。
— JS dev
私は、react-document-titleがreact 16.5でうまく機能することを確認します
— Jo-Go

回答:

81

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>
        ...
      </>
    )
  }
}
— quotesBro
ソース
最初の1秒でindex.htmlのコンテンツが「フラッシュ」されますよね？
— nxmohamad
3
これが間違いなく最高の答えになるはずです。タイトルやその他のメタ属性を管理するための優れた宣言的な方法です
— Ryall 2018
113 
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を使用している場合は、インラインをtrueに設定します

— アレックスベスティン
ソース
4
これは機能しますが、ページのロード中はドキュメントのタイトルは「React App」のままです-それを修正する方法はありますか？
— eli
7
index.htmlのタイトルタグのコンテンツを変更する
— AlexVestin
4
@quotesBroの回答のように宣言的に行う方が良い
— Ryall
1
この方法はSEOにとって問題ありませんか？
— Davidm176
@AlexVestin Reactアプリケーションでビューごとに異なるタイトルが必要な場合はお勧めできません
— Kevin
51

React 16.8では、useEffectを使用して機能コンポーネントでこれを行うことができます。

例えば： 

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

2番目の引数を配列として持つと、useEffectが1回だけ呼び出され、と同様になりcomponentDidMountます。

— ジョーダン・ダニエルズ
ソース
これはどのように冗談と酵素でテストできますか？
— nickstaroba
16

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

初期ドキュメントタイトルを使用してcreate-react-appいる場合は、タグファイルに設定されます。<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!

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

— 不機嫌
ソース
.envファイルは、package.jsonファイルと同じレベルに配置してください。:)
— イアン・スミス
10

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

componentWillMount() {
    document.title = 'your title name'
  },
— アルヴィン
ソース
7
componentWillMount（）は、最新の反応バージョン16で非推奨になりました
— Hemadri Dasari 2018
3
この場合、ほとんどの場合と同様に、非推奨のcomponentWillMountを削除する必要がある場合は、コードをcomponentDidMount
— Jo-Go
9

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

次に例を示します。

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} />
— 大佐32
ソース
うわー、非常に有望に見えます、React Helmetとdocument.titleは両方とも機能しますが、これは素晴らしいです:)ありがとう
— mamsoudi
fullTitleindex.htmlに既にあるコンテンツに追加するだけであることに気付くまで、私はこのソリューションを気に入っていました<title>Default Title</title>。
— JWess
モジュールのデフォルトのタイトルを削除するだけです（constructor！ではありません） `` `import React from 'react'; 'prop-types'からPropTypesをインポートします。ReactDOMからReactDOMをインポートします。const titleNode = document.getElementsByTagName（ "title"）[0]; titleNode.innerText = ''; エクスポートのデフォルトクラスTitle extends React.PureComponent {static propTypes = {children：PropTypes.node、}; コンストラクタ（プロップ）{スーパー（プロップ）; this.el = titleNode; } render（）{return ReactDOM.createPortal（this.props.children、this.el、）; }} `` `
— アナトリーLitinskiy
9

React 16.13では、レンダリング関数内で直接設定できます。

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    render() {
        document.title = 'wow'
        return <p>Hello</p>
    }
}

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

関数コンポーネントの場合：

function App() {
    document.title = 'wow'
    return <p>Hello</p>
}
— Mイマームプラタマ
ソース
1
これは、多くの反応コードベースで発生する典型的なエラーです：しないでください！副作用を実行する必要がある場合、すべてのレンダリングメソッドは純粋な関数（副作用なし）である必要があります。機能コンポーネントのuseEffect、またはクラスのコンポーネントイベント（詳細：reddit.com/r/reactjs/comments/8avfej/…）
— エリアスプラテック
6

単純に、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
— アミンmsh
ソース
3

以下で使用できます 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')
);

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

— EsterlingAccime Youtuber
ソース
2

私はこれを徹底的にテストしていませんが、これはうまくいくようです。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>構成要素、それは私には奇妙なようです。

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

— MPEN
ソース
2

あなたはReactDOMを使用して<title>タグを変更することができます

ReactDOM.render(
   "New Title",
   document.getElementsByTagName("title")[0]
);
— レザモラディ
ソース
0

私はこの方法を使用していますが、この方法は自分にとっては簡単なのでわかりました。機能部品と組み合わせて使用​​します。 これを行うのは、ユーザーがページでJavaScriptを無効にしてもタイトルが表示されないようにしたい場合のみです。

あなたがしなければならないことが2つあります。

1. index.htmlに移動し、この行をここで削除します

<title>React App</title>

2. mainapp関数に移動し、これを通常のhtml構造に戻します。メインのコンテンツをコピーして、ウェブサイトのbodyタグの間に貼り付けます。 

return (
        <html>
          <head>
            <title>hi</title>
          </head>
          <body></body>
        </html>
      );

タイトルは自由に入れ替えることができます。

— マクシウム
ソース
-7

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

— スタンレーンド
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.