Thay đổi tiêu đề tài liệu trong React?

Tôi đang cố gắng cập nhật tiêu đề của tài liệu trong ứng dụng React. Tôi có nhu cầu rất đơn giản cho việc này. Tiêu đề về cơ bản được sử dụng để đặt thành phần Total hiển thị ngay cả khi bạn đang ở trên một tab khác.Thay đổi tiêu đề tài liệu trong React?

Đây là bản năng đầu tiên của tôi:

const React = require('react'); 

export default class Total extends React.Component { 
    shouldComponentUpdate(nextProps) { 
    //otherstuff 
    document.title = this.props.total.toString(); 
    console.log("Document title: ", document.title); 
    return true; 
    } 
    render() { 
    document.title = this.props.total; 
    return (
     <div className="text-center"> 
     <h1>{this.props.total}</h1> 
     </div> 
    ); 
    } 
}

Tôi nghĩ điều này sẽ chỉ cập nhật document.title mỗi khi thành phần này được trả lại, nhưng nó không xuất hiện để làm bất cứ điều gì .

Không chắc chắn những gì tôi thiếu ở đây. Có lẽ một cái gì đó để làm với cách React chạy chức năng này - có lẽ một nơi nào đó mà biến số document không có sẵn?

EDIT:

Tôi bắt đầu một tiền thưởng cho câu hỏi này, như tôi vẫn chưa tìm thấy bất kỳ giải pháp. Tôi đã cập nhật mã của mình lên phiên bản mới hơn.

Phát triển kỳ lạ là console.logkhông in tiêu đề tôi đang tìm kiếm. Nhưng vì lý do nào đó, tiêu đề thực tế trong tab không cập nhật. Vấn đề này giống nhau trên Chrome, Safari và Firefox.

Nguồn

2016-01-17 fnsjdnfksjdb

Bạn đang tạo dựng hình phổ quát? Bất kỳ lỗi nào trong bảng điều khiển? –

Không có gì hiển thị trong bảng điều khiển. Và thành thật mà nói, tôi không biết ý bạn là gì bởi 'dựng hình phổ quát'. Tôi đang kết xuất độc quyền trong trình duyệt, sử dụng 'ReactDOM.render'. – fnsjdnfksjdb

Một câu hỏi ngớ ngẩn có thể, nhưng sau đó tình hình của bạn có vẻ bối rối ... Có, bởi bất kỳ cơ hội, trang của bạn có khung? Thực hiện một điều khác, trong mã thành phần của bạn, hãy ghi lại kết quả của '(window == top)'. – hazardous

Tôi nghĩ webpack-dev-server chạy trong một chế độ iframe theo mặc định:

https://webpack.github.io/docs/webpack-dev-server.html#iframe-mode

Vì vậy, đó có thể là lý do tại sao những nỗ lực của bạn để đặt tiêu đề đang thất bại. Hãy thử đặt tùy chọn inline thành true trên webpack-dev-server, nếu bạn chưa thực hiện.

Nguồn

2016-02-05 13:12:21 WildService

Gimme rằng tiền thưởng ngọt ngào chết tiệt! :) – WildService

và tôi đã tự hỏi tại sao họ gọi bạn là WILDservice –

Có thực sự là một package bởi gaeron cho mục đích này, nhưng theo một cách tường thuật:

npm install --save react-document-title

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

export default class Total extends Component { 

    render() { 
    return (
     <DocumentTitle title={this.props.total}> 
     <div className='text-center'> 
      <h1>{this.props.total}</h1> 
     </div> 
     </DocumentTitle> 
    ) 
    } 

}

Nguồn

2016-01-17 01:34:11

Tôi đã chụp ảnh này nhưng không hoạt động. 'this.props.total' là một số, vì vậy lúc đầu tôi gặp lỗi liên quan đến điều đó. Nhưng bây giờ điều đó đã được sửa và nó không hoạt động âm thầm. Tiêu đề tài liệu không cập nhật. – fnsjdnfksjdb

Hum, làm thế nào để bạn phục vụ ứng dụng của bạn, sử dụng webpack? –

Điều tôi đoán là 'document.title' không được hỗ trợ trong môi trường của bạn (ví dụ như khi bạn đang ở trên một giao thức file: //) –

Nếu gói react-document-title không làm việc cho bạn, quick'n'dirty cách để thực hiện điều đó sẽ theo phương pháp vòng đời, có thể là cả hai componentDidMount và componentWillReceiveProps (bạn có thể đọc thêm về những số here):

Vì vậy, bạn sẽ làm điều gì đó như:

const React = require('react'); 

export default class Total extends React.Component { 

    // gets called whenever new props are assigned to the component 
    // but NOT during the initial mount/render 
    componentWillReceiveProps(nextProps) { 
    document.title = this.props.total; 
    } 

    // gets called during the initial mount/render 
    componentDidMount() { 
    document.title = this.props.total; 
    } 

    render() {  
    return (
     <div className="text-center"> 
     <h1>{this.props.total}</h1> 
     </div> 
    ); 
    } 
}

Nguồn

2016-01-17 06:54:42 rossipedia

Tôi phải chạy vào một số vấn đề lớn hơn, vì điều này cũng không hoạt động. Tôi đã thử đặt một 'console.log' với chúng, và các hàm đang chạy, nhưng vì một lý do nào đó' document.title = something' không hoạt động. – fnsjdnfksjdb

Có cách tốt hơn để tự động thay đổi tiêu đề tài liệu với gói react-helmet.

Thực tế bạn có thể thay đổi động bất kỳ thứ gì bên trong <head> bằng cách sử dụng react-helmet từ bên trong thành phần của bạn.

const componentA = (props) => { 
    return (
     <div> 
     <Helmet> 
     <title>Your dynamic document/page Title</title> 
     <meta name="description" content="Helmet application" /> 
     </Helmet> 
     .....other component content 
    ); 
    }

Nguồn

2017-12-27 22:48:06 asmmahmud

Thay đổi tiêu đề tài liệu trong React?

Trả lời

Các vấn đề liên quan