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