[javascript] React에서 문서 제목을 어떻게 설정합니까?

Program / 글쓴이

내 React 애플리케이션의 문서 제목 (브라우저 제목 표시 줄)을 설정하고 싶습니다. 나는 사용하여 시도했다 반응 – 문서 제목 (구식 인 것 같다) 및 설정을 document.title에 constructor그리고 componentDidMount()이러한 솔루션 작업 없음 -.

답변

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>
        ...
      </>
    )
  }
}

답변

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로 설정하십시오.

답변

React 16.8의 경우 useEffect를 사용하여 기능적 구성 요소로이를 수행 할 수 있습니다. .

예를 들면 : 

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

두 번째 인수를 배열로 사용하면 useEffect를 한 번만 호출하여 componentDidMount.

답변

다른 사람들이 언급했듯이 document.title = 'My new title'및 React Helmet 을 사용하여 페이지 제목을 업데이트 할 수 있습니다 . 이 두 솔루션 모두 스크립트가로드되기 전에 초기 ‘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!

참조 : 사용자 지정 환경 변수 추가

답변

‘componentWillMount’의 라이프 사이클에서 문서 제목을 설정해야합니다.

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

답변

React Portal<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} />

답변

React 16.13에서는 render 함수 내에서 직접 설정할 수 있습니다.

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>
}