Làm cách nào để bạn đặt tiêu đề tài liệu trong React?

Question 1

Tôi muốn đặt tiêu đề tài liệu (trong thanh tiêu đề của trình duyệt) cho ứng dụng React của mình. Tôi đã cố gắng sử dụng phản ứng-tài liệu-tiêu đề (có vẻ lỗi thời) và thiết lập document.titletrong constructorvà componentDidMount()- không ai trong số các giải pháp này làm việc.

Question 2

Bạn có thể sử dụng 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>
        ...
      </>
    )
  }
}

Question 3

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')
);

Điều này làm việc cho tôi.

Chỉnh sửa: Nếu bạn đang sử dụng webpack-dev-server, hãy đặt nội tuyến thành true

Question 4

Đối với React 16.8, bạn có thể thực hiện việc này với một thành phần chức năng bằng useEffect .

Ví dụ:

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

Có đối số thứ hai như một cuộc gọi mảng useEffect chỉ một lần, làm cho nó tương tự như componentDidMount.

Question 5

Như những người khác đã đề cập, bạn có thể sử dụng document.title = 'My new title'và React Helmet để cập nhật tiêu đề trang. Cả hai giải pháp này sẽ vẫn hiển thị tiêu đề 'Ứng dụng phản ứng' ban đầu trước khi các tập lệnh được tải.

Nếu bạn đang sử dụng create-react-app, tiêu đề tài liệu ban đầu được đặt trong tệp <title>thẻ /public/index.html.

Bạn có thể chỉnh sửa trực tiếp hoặc sử dụng trình giữ chỗ sẽ được điền từ các biến môi trường:

/.env:

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

Nếu vì lý do nào đó mà tôi muốn có một danh hiệu khác trong môi trường phát triển của mình -

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

Cách tiếp cận này cũng có nghĩa là tôi có thể đọc biến môi trường tiêu đề trang web từ ứng dụng của mình bằng cách sử dụng process.envđối tượng toàn cục , điều này thật tuyệt:

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

Xem: Thêm các biến môi trường tùy chỉnh

Question 6

bạn nên đặt tiêu đề tài liệu trong vòng đời của 'componentWillMount':

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

Question 7

Cổng React có thể cho phép bạn hiển thị các phần tử bên ngoài nút React gốc (chẳng hạn như tại <title>), như thể chúng là các nút React thực sự. Vì vậy, bây giờ bạn có thể đặt tiêu đề rõ ràng và không có bất kỳ phụ thuộc nào khác:

Đây là một ví dụ:

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;

Chỉ cần đặt thành phần vào trang và đặt pageTitle:

<Title pageTitle="Dashboard" />
<Title pageTitle={item.name} />

Question 8

Trong React 16.13, bạn có thể đặt nó trực tiếp bên trong hàm 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')
)

Đối với thành phần chức năng:

function App() {
    document.title = 'wow'
    return <p>Hello</p>
}

Question 9

Đơn giản bạn có thể tạo một hàm trong tệp js và xuất nó để sử dụng trong các thành phần

như dưới đây:

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

và sử dụng nó trong bất kỳ thành phần nào như sau:

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

Question 10

Bạn có thể sử dụng những điều sau đây với 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')
);

hoặc Bạn có thể sử dụng gói npm này 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')
);

Mã hóa vui vẻ !!!

Question 11

Tôi đã không kiểm tra điều này quá kỹ lưỡng, nhưng điều này có vẻ hiệu quả. Được viết bằng 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;
    }
}

Sử dụng:

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

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

Không chắc tại sao những người khác lại quan tâm đến việc đưa toàn bộ ứng dụng của họ vào bên trong<Title> thành phần , điều đó có vẻ kỳ lạ với tôi.

Bằng cách cập nhật document.titlebên trong, render()nó sẽ làm mới / luôn cập nhật nếu bạn muốn có một tiêu đề động. Nó cũng sẽ hoàn nguyên tiêu đề khi được ngắt kết nối. Cổng rất dễ thương, nhưng dường như không cần thiết; chúng tôi không thực sự cần phải thao tác bất kỳ nút DOM nào ở đây.

Question 12

Bạn có thể sử dụng ReactDOM và thay đổi <title>thẻ

ReactDOM.render(
   "New Title",
   document.getElementsByTagName("title")[0]
);

Question 13

Tôi sử dụng phương pháp này, mà tôi phát hiện ra vì nó dễ dàng hơn cho tôi. Tôi sử dụng nó kết hợp với thành phần chức năng. Chỉ làm điều này, nếu bạn không quan tâm rằng nó sẽ không hiển thị bất kỳ tiêu đề nào nếu người dùng tắt Javascript trên trang của bạn.

Có hai điều bạn cần làm.

1.Đi vào index.html của bạn và xóa dòng này tại đây

<title>React App</title>

2.Đi vào hàm mainapp của bạn và trả về đây chỉ là cấu trúc html thông thường, bạn có thể sao chép và dán nội dung chính từ trang web của mình vào giữa các thẻ body:

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

Bạn có thể thay thế tiêu đề theo ý muốn.

Question 14

Nếu bạn là người mới bắt đầu, bạn chỉ có thể tự cứu mình khỏi tất cả những điều đó bằng cách đi tới thư mục chung của thư mục dự án phản ứng của bạn và chỉnh sửa tiêu đề trong "index.html" và đặt của bạn. Đừng quên lưu để nó sẽ phản ánh.