কীভাবে আপনি প্রতিক্রিয়াতে দস্তাবেজের শিরোনাম সেট করবেন?

Question 1

আমি আমার প্রতিক্রিয়া প্রয়োগের জন্য নথির শিরোনামটি (ব্রাউজারের শিরোনাম বারে) সেট করতে চাই। আমি প্রতিক্রিয়া-দস্তাবেজ-শিরোনাম ব্যবহার করার চেষ্টা করেছি (পুরানো মনে হচ্ছে) এবং document.titleএর মধ্যে constructorএবং এর মধ্যে componentDidMount()কোন একটি সমাধান কাজ করে না।

Question 2

আপনি প্রতিক্রিয়া হেলমেট ব্যবহার করতে পারেন :

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

এটি আমার পক্ষে কাজ করে।

সম্পাদনা: আপনি যদি ওয়েবপ্যাক-ডেভ-সার্ভারটি ইনলাইনটিকে সত্যে সেট করে থাকেন

Question 4

প্রতিক্রিয়া 16.8 এর জন্য, আপনি ইউজএফেক্ট ব্যবহার করে একটি কার্যকরী উপাদান দিয়ে এটি করতে পারেন ।

উদাহরণ স্বরূপ:

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

অ্যারে হিসাবে দ্বিতীয় যুক্তি থাকা কেবল একবারই UseEffect কল করে, এটির অনুরূপ করে componentDidMount।

Question 5

অন্যরা যেমন উল্লেখ করেছে, আপনি পৃষ্ঠার শিরোনাম আপডেট করতে হেলমেট ব্যবহার করতে পারেন 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!

দেখুন: কাস্টম এনভায়রনমেন্ট ভেরিয়েবল যুক্ত করা

Question 6

'উপাদানবিশেষমাউন্ট' এর জীবনচক্রটিতে আপনার নথির শিরোনাম সেট করা উচিত:

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

Question 7

প্রতিক্রিয়া পোর্টালগুলি আপনাকে মূল প্রতিক্রিয়া নোডের বাইরে উপাদানগুলিতে রেন্ডার করতে দেয় (যেমন <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} />

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

Question 9

কেবলমাত্র আপনি একটি জেএস ফাইলে একটি ফাংশন তৈরি করতে পারেন এবং উপাদানগুলিতে ব্যবহারের জন্য এটি রফতানি করতে পারেন

নীচের মত:

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

Question 10

আপনি নীচের সাথে নীচে ব্যবহার করতে পারেন 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 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')
);

শুভ কোডিং !!!

Question 11

আমি এটি খুব পুঙ্খানুপুঙ্খভাবে পরীক্ষা করে দেখিনি, তবে এটি কার্যকর বলে মনে হচ্ছে। টাইপস্ক্রিপ্ট লিখিত।

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()আপনি গতিশীল শিরোনাম চাইলে তা রিফ্রেশ / আপডেট থাকবেন। খুব আনমাউন্ট করার পরে এটি শিরোনামটি ফিরিয়ে নেওয়া উচিত। পোর্টালগুলি দুর্দান্ত, তবে মনে হয় অপ্রয়োজনীয়; আমাদের এখানে কোনও ডিওএম নোড ব্যবহার করার দরকার নেই।

Question 12

আপনি ReactDOM এবং পরিবর্তনকারী <title>ট্যাগ ব্যবহার করতে পারেন

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

Question 13

প্রতিক্রিয়া 16.8। আপনি এটি করার জন্য একটি কাস্টম হুক তৈরি করতে পারেন (@ শর্টচেঞ্জের সমাধানের অনুরূপ):

export function useTitle(title) {
  useEffect(() => {
    const prevTitle = document.title
    document.title = title
    return () => {
      document.title = prevTitle
    }
  })
}

এটি কোনও প্রতিক্রিয়া উপাদানগুলিতে ব্যবহার করা যেতে পারে, যেমন:

const MyComponent = () => {
  useTitle("New Title")
  return (
    <div>
     ...
    </div>
  )
}

উপাদানটি মাউন্ট করার সাথে সাথে এটি শিরোনাম আপডেট করবে এবং এটি আনমাউন্ট করা হলে এটি পূর্বের শিরোনামে ফিরে আসবে।

Question 14

আমি এই পদ্ধতিটি ব্যবহার করি, যা আমার পক্ষে এটি সহজতর হওয়ার পরে খুঁজে পেয়েছিলাম। আমি এটি ফাংশন উপাদানগুলির সাথে সংমিশ্রণে ব্যবহার করি। কেবলমাত্র এটি করুন, যদি ব্যবহারকারী আপনার পৃষ্ঠায় জাভাস্ক্রিপ্ট অক্ষম করে তবে এটি কোনও শিরোনাম প্রদর্শন করবে না care

আপনার দুটি জিনিস করতে হবে।

1. আপনার সূচক html এ যান এবং এই লাইনটি এখানে মুছুন

<title>React App</title>

২. আপনার মাইনাপ ফাংশনে যান এবং এটি যা কেবলমাত্র একটি সাধারণ এইচটিএমএল কাঠামো হিসাবে ফিরে আসুন, আপনি বডি ট্যাগের মধ্যে আপনার ওয়েবসাইট থেকে আপনার মূল বিষয়বস্তু অনুলিপি করে আটকে দিতে পারেন:

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

আপনি নিজের ইচ্ছামতো শিরোনামটি প্রতিস্থাপন করতে পারেন।

Question 15

const setTitle = (title) => {
  const prevTitle = document.title;
  document.title = title;
  return () => document.title = prevTitle;
}

const MyComponent = () => {
  useEffect(() => setTitle('Title while MyComponent is mounted'), []);

  return <div>My Component</div>;
}

আজকের কাজ করার সময় এটি একসাথে ছুঁড়ে ফেলার একটি দুর্দান্ত সমাধান। setTitleএমন একটি ফাংশন প্রদান করে যা শিরোনামটি পুনরায় সেট করে যা এটি ব্যবহারের আগে ছিল setTitle, এটি প্রতিক্রিয়ার useEffectহুকের ভিতরে দুর্দান্তভাবে কাজ করে ।

Question 16

আপনি যদি একজন শিক্ষানবিস হন তবে আপনি কেবল আপনার প্রতিক্রিয়া প্রকল্প ফোল্ডারের পাবলিক ফোল্ডারে গিয়ে ".h index .h .h .h .h t t t t index" শিরোনামটি সম্পাদনা করে নিজের রেখে দিতে পারেন all সংরক্ষণ করতে ভুলবেন না যাতে এটি প্রতিফলিত হয়।