आप प्रतिक्रिया में दस्तावेज़ शीर्षक कैसे सेट करते हैं?

105

मैं अपने रिएक्ट एप्लिकेशन के लिए दस्तावेज़ शीर्षक (ब्राउज़र शीर्षक बार में) सेट करना चाहूंगा। मैंने प्रतिक्रिया-दस्तावेज़-शीर्षक (तारीख से बाहर लगता है) का उपयोग करने की कोशिश document.titleकी है constructorऔर componentDidMount()इन समाधानों में से कोई भी काम नहीं करता है।

javascript reactjs dom

— एली
स्रोत

तारीख से बहार? @DanAbramov मुझे लगता है कि प्रतिक्रिया-दस्तावेज़-शीर्षक React16 के साथ-साथ अच्छी तरह से काम करता है।

— विशाल गुलाटी

मैं पुष्टि करता हूं, प्रतिक्रिया-दस्तावेज-शीर्षक प्रतिक्रिया 16.5 के साथ काम करता है

— जो-गो

81

आप रिएक्ट हेलमेट का उपयोग कर सकते हैं :

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
स्रोत

यह पहली बार, सही में index.html की सामग्री को 'फ्लैश' करेगा?

— nxmohamad

3

यह निश्चित रूप से शीर्ष उत्तर होना चाहिए। शीर्षक और अन्य मेटा विशेषताओं का प्रबंधन करने के लिए यह एक उत्कृष्ट घोषणात्मक तरीका है

— रयाल

111

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 सेट इनलाइन को सही उपयोग कर रहे हैं

— AlexVestin
स्रोत

4

यह काम करता है लेकिन दस्तावेज़ का शीर्षक अभी भी "रिएक्ट ऐप" है जबकि पेज लोड हो रहा है - किसी भी विचार को कैसे ठीक किया जाए?

— एली

7

आपका index.html में शीर्षक टैग की सामग्री को बदल

— AlexVestin

4

इसे बेहतर रूप से घोषित करने के लिए @ quotBro के जवाब में पसंद करें

— Ryall

1

क्या यह तरीका SEO के लिए ठीक है?

— डेविडम 176

@AlexVestin एक अच्छा विचार नहीं है अगर आपको अपने रिएक्ट एप्लिकेशन में अलग-अलग विचारों के लिए अलग-अलग शीर्षकों की आवश्यकता है

— केविन

48

के लिए प्रतिक्रिया में 16.8, आप एक कार्यात्मक घटक का उपयोग के साथ ऐसा कर सकते हैं useEffect ।

उदाहरण के लिए:

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

एक सरणी के रूप में दूसरा तर्क होने के बाद, केवल एक बार ही कॉल करें, जिससे यह समान हो componentDidMount।

— जॉर्डन डेनियल
स्रोत

यह कीट और एंजाइम के साथ कैसे परीक्षण किया जा सकता है?

— निकोसारोबा

16

जैसा कि दूसरों ने उल्लेख किया है, आप पृष्ठ शीर्षक को अपडेट करने के लिए हेलमेटdocument.title = 'My new title' और रिएक्ट का उपयोग कर सकते हैं । स्क्रिप्ट के लोड होने से पहले ये दोनों समाधान अभी भी प्रारंभिक 'रिएक्ट ऐप' शीर्षक प्रदान करेंगे।

आप उपयोग कर रहे हैं प्रारंभिक दस्तावेज़ शीर्षक में स्थापित किया जाएगा टैग फ़ाइल।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!

देखें: कस्टम पर्यावरण चर को जोड़ना

— Gruffy
स्रोत

अपने पैकेज के समान स्तर पर .env फ़ाइलों को रखना सुनिश्चित करें। json फ़ाइल। :)

— इयान स्मिथ

10

आपको 'कंपोनेंटमाउंट' के जीवन चक्र में दस्तावेज़ का शीर्षक निर्धारित करना चाहिए:

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

— एल्विन
स्रोत

7

ComponentsWillMount () को नवीनतम प्रतिक्रिया संस्करण 16 में

— चित्रित किया गया है

3

इस मामले में, जैसा कि ज्यादातर समय के मामलों में, जब आपको हटाए गए घटक को हटाना होगा, तो अपने कोड को कंपोनेंट पर ले

— जाएं

9

रिएक्ट पोर्टल्स आपको रूट रिएक्ट नोड (जैसे <title>) के बाहर के तत्वों को प्रस्तुत करने दे सकते हैं , जैसे कि वे वास्तविक रिएक्ट नोड थे। तो अब आप शीर्षक को बिना किसी अतिरिक्त निर्भरता के साफ-सुथरे तरीके से सेट कर सकते हैं:

यहाँ एक उदाहरण है:

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

— कर्नल थर्टी टू
स्रोत

वाह, बहुत अच्छा लग रहा है, रिएक्ट हेलमेट और डॉक्यूमेंट। दोनों काम करते हैं, लेकिन यह बहुत बढ़िया है :) धन्यवाद

— mamsoudi

मुझे यह समाधान बहुत अच्छा लगा, जब तक मुझे महसूस नहीं हुआ कि यह केवल fullTitleindex.html में पहले से मौजूद सामग्री पर निर्भर करता है <title>Default Title</title>।

— JWess

बस अपने मॉड्यूल में डिफ़ॉल्ट शीर्षक को हटा दें (में नहीं constructor) `` `प्रतिक्रिया से प्रतिक्रिया आयात करें; आयात PropTypes 'प्रोप-प्रकार' से; 'रिएक्ट-डोम' से ReactDOM आयात करें; const titleNode = document.getElementsByTagName ("शीर्षक") [0]; titleNode.innerText = ''; निर्यात डिफ़ॉल्ट वर्ग शीर्षक React.PureComponent {static propTypes = {children: PropTypes.node,}} का विस्तार करता है; कंस्ट्रक्टर (प्रॉप्स) {सुपर (प्रॉप्स); this.el = titleNode; } रेंडर () {रिटर्न ReactDOM.createPortal (यह। रिप्रोडीचिल्डेन, इस.ल,); }} `` `

— अनातोली लिटिंस्की

8

प्रतिक्रिया 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>
}

— एम इमाम प्रतामा
स्रोत

1

यह एक विशिष्ट त्रुटि है जो कई प्रतिक्रिया कोड आधारों में प्रकट होती है: यह मत करो! प्रत्येक रेंडर तरीके शुद्ध कार्य (कोई साइड इफेक्ट्स) नहीं होने चाहिए, यदि आपको साइड इफेक्ट करने की आवश्यकता है: कार्यात्मक घटकों, या घटक घटनाओं के लिए कक्षाओं में उपयोग करें (अधिक जानकारी: reddit.com/r/reactjs/comments/8avfeh…… )

— एलियास प्लेटक

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

— एमिन एम.एस.
स्रोत

2

आप के साथ नीचे का उपयोग कर सकते हैं 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')
);

हैप्पी कोडिंग !!!

— एस्टरलिंगअकीम यूटूबेर
स्रोत

2

मैंने इसे बहुत अच्छी तरह से परीक्षण नहीं किया है, लेकिन यह काम करने लगता है। टाइपस्क्रिप्ट में लिखा है।

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

मैं इस पद्धति का उपयोग करता हूं, जो मुझे पता चला क्योंकि यह मेरे लिए आसान है। मैं फ़ंक्शन घटक के साथ संयोजन में इसका उपयोग करता हूं। यदि आप इस बात की परवाह नहीं करते हैं कि यदि उपयोगकर्ता आपके पृष्ठ पर जावास्क्रिप्ट को निष्क्रिय करता है तो यह कोई शीर्षक प्रदर्शित नहीं करेगा।

दो चीजें हैं जो आपको करने की आवश्यकता है।

1. अपने index.html में जाएँ और इस लाइन को यहाँ हटाएँ

<title>React App</title>

अपने मुख्य कार्य में 2.Go करें और इसे वापस लौटाएं जो कि केवल एक सामान्य HTML संरचना है, आप अपनी मुख्य सामग्री को अपनी वेबसाइट से बॉडी टैग्स के बीच कॉपी और पेस्ट कर सकते हैं:

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

आप अपनी इच्छानुसार शीर्षक को बदल सकते हैं।

— Makusium
स्रोत

-7

यदि आप एक शुरुआत कर रहे हैं, तो आप बस अपने आप को उस सभी से बचा सकते हैं, जो आपके रिएक्शन प्रोजेक्ट फ़ोल्डर के सार्वजनिक फ़ोल्डर में जाकर "index.html" में शीर्षक को संपादित करता है और आपको डालता है। बचाने के लिए मत भूलना तो यह प्रतिबिंबित होगा।

— Stanleynd
स्रोत