কীভাবে কোনও সন্তানের উপাদান থেকে প্রতিক্রিয়া প্রসঙ্গে আপডেট করবেন?

Question 1

আমার নীচের মত প্রসঙ্গে ভাষা সেটিংস রয়েছে

class LanguageProvider extends Component {
  static childContextTypes = {
    langConfig: PropTypes.object,
  };

  getChildContext() {
    return { langConfig: 'en' };
  }

  render() {
    return this.props.children;
  }
}

export default LanguageProvider;

আমার অ্যাপ্লিকেশন কোডটি নীচের মতো হবে

<LanguageProvider>
  <App>
    <MyPage />
  </App>
</LanguageProvider>

আমার পৃষ্ঠায় ভাষাটি পরিবর্তন করতে একটি উপাদান রয়েছে

<MyPage>
  <LanguageSwitcher/>
</MyPage>

LanguageSwitcher এর MyPageজন্য নীচের মতো ভাষাটিকে 'জেপিতে' পরিবর্তন করতে প্রসঙ্গে আপডেট করতে হবে

class LanguageSwitcher extends Component {
  static contextTypes = {
    langConfig: PropTypes.object,
  };

  updateLanguage() {
    //Here I need to update the langConfig to 'jp' 
  }

  render() {
    return <button onClick={this.updateLanguage}>Change Language</button>;
  }
}

export default LanguageSwitcher;

আমি কীভাবে ল্যাঙ্গুয়েজ সুইচর উপাদানটির মধ্য থেকে প্রসঙ্গটি আপডেট করতে পারি?

Question 2

হুক ব্যবহার করা

হুকগুলি 16.8.0 এ প্রবর্তিত হয়েছিল তাই নিম্নলিখিত কোডটির ন্যূনতম সংস্করণ 16.8.0 প্রয়োজন (শ্রেণীর উপাদানগুলির উদাহরণের জন্য ডাউন স্ক্রোল করুন)। কোডস্যান্ডবক্স ডেমো

1. গতিশীল প্রসঙ্গের জন্য প্যারেন্ট রাষ্ট্র নির্ধারণ করা

প্রথমত, গতিশীল প্রসঙ্গে যা গ্রাহকদের কাছে দেওয়া যেতে পারে, আমি পিতামাতার রাজ্যটি ব্যবহার করব। এটি নিশ্চিত করে যে আমি সত্যের একক উত্স সামনে চলেছি। উদাহরণস্বরূপ, আমার প্যারেন্ট অ্যাপটি এর মতো দেখতে পাবেন:

const App = () => {
  const [language, setLanguage] = useState("en");
  const value = { language, setLanguage };

  return (
    ...
  );
};

languageরাষ্ট্র মধ্যে সংরক্ষিত হয়। আমরা উভয় languageএবং সেটার ফাংশন setLanguageপরে প্রসঙ্গে হবে।

২. একটি প্রসঙ্গ তৈরি করা

এরপরে, আমি এর মতো একটি ভাষা প্রসঙ্গ তৈরি করেছি:

// set the defaults
const LanguageContext = React.createContext({
  language: "en",
  setLanguage: () => {}
});

এখানে আমি language('এন') এর জন্য ডিফল্ট এবং একটি setLanguageফাংশন সেট করছি যা প্রসঙ্গ সরবরাহকারীর মাধ্যমে ভোক্তার কাছে প্রেরণ করা হবে। এগুলি কেবলমাত্র ডিফল্ট এবং প্যারেন্টে সরবরাহকারীর উপাদান ব্যবহার করার সময় আমি তাদের মানগুলি সরবরাহ করব App।

দ্রষ্টব্য: LanguageContextআপনি একই কিনা

৩. প্রসঙ্গ ভোক্তা তৈরি করা

ভাষা পরিবর্তনকারীটি ভাষা সেট করার জন্য, এটি প্রসঙ্গের মাধ্যমে ভাষা সেটার ফাংশনে অ্যাক্সেস থাকা উচিত। এটি এর মতো কিছু দেখতে পারে:

const LanguageSwitcher = () => {
  const { language, setLanguage } = useContext(LanguageContext);
  return (
    <button onClick={() => setLanguage("jp")}>
      Switch Language (Current: {language})
    </button>
  );
};

এখানে আমি ভাষাটি 'জেপি' তে সেট করছি তবে এর জন্য ভাষা নির্ধারণ করতে আপনার নিজের যুক্তি থাকতে পারে।

৪. কোনও সরবরাহকারীকে গ্রাহককে মুড়িয়ে দেওয়া

এখন আমি আমার ভাষা পরিবর্তনকারী উপাদানটি একটিতে রেন্ডার করব LanguageContext.Providerএবং যে মানগুলিকে প্রসঙ্গের মাধ্যমে গভীরতর কোনও প্রান্তে প্রেরণ করতে হবে তা পাস করব। এখানে আমার পিতামাতার Appচেহারা কেমন:

const App = () => {
  const [language, setLanguage] = useState("en");
  const value = { language, setLanguage };

  return (
    <LanguageContext.Provider value={value}>
      <h2>Current Language: {language}</h2>
      <p>Click button to change to jp</p>
      <div>
        {/* Can be nested */}
        <LanguageSwitcher />
      </div>
    </LanguageContext.Provider>
  );
};

এখন, যখনই ভাষা পরিবর্তনকারী ক্লিক করা হয় এটি প্রসঙ্গটি পরিবর্তনশীলভাবে আপডেট করে।

কোডস্যান্ডবক্স ডেমো

বর্গ উপাদান ব্যবহার

সর্বশেষতম কনটেক্স এপিআই 16.3 এর প্রতিক্রিয়াতে প্রবর্তিত হয়েছিল যা গতিশীল প্রসঙ্গে থাকার দুর্দান্ত উপায় সরবরাহ করে। নিম্নলিখিত কোডটির সর্বনিম্ন সংস্করণ 16.3.0 প্রয়োজন। কোডস্যান্ডবক্স ডেমো

1. গতিশীল প্রসঙ্গের জন্য প্যারেন্ট রাষ্ট্র নির্ধারণ করা

প্রথমত, গতিশীল প্রসঙ্গে যা গ্রাহকদের কাছে দেওয়া যেতে পারে, আমি পিতামাতার রাজ্যটি ব্যবহার করব। এটি নিশ্চিত করে যে আমি সত্যের একক উত্স সামনে চলেছি। উদাহরণস্বরূপ, আমার প্যারেন্ট অ্যাপটি এর মতো দেখতে পাবেন:

class App extends Component {
  setLanguage = language => {
    this.setState({ language });
  };

  state = {
    language: "en",
    setLanguage: this.setLanguage
  };

  ...
}

languageএকটি ভাষা সেটার পদ্ধতি, যা আপনি রাষ্ট্র গাছ বাহিরে রাখতে পারে সহ রাষ্ট্র মধ্যে সংরক্ষিত হয়।

২. একটি প্রসঙ্গ তৈরি করা

এরপরে, আমি এর মতো একটি ভাষা প্রসঙ্গ তৈরি করেছি:

// set the defaults
const LanguageContext = React.createContext({
  language: "en",
  setLanguage: () => {}
});

এখানে আমি language('এন') এর জন্য ডিফল্ট এবং একটি setLanguageফাংশন সেট করছি যা প্রসঙ্গ সরবরাহকারীর মাধ্যমে ভোক্তার কাছে প্রেরণ করা হবে। এগুলি কেবলমাত্র ডিফল্ট এবং প্যারেন্টে সরবরাহকারীর উপাদান ব্যবহার করার সময় আমি তাদের মানগুলি সরবরাহ করব App।

৩. প্রসঙ্গ ভোক্তা তৈরি করা

ভাষা পরিবর্তনকারীটি ভাষা সেট করার জন্য, এটি প্রসঙ্গের মাধ্যমে ভাষা সেটার ফাংশনে অ্যাক্সেস থাকা উচিত। এটি এর মতো কিছু দেখতে পারে:

class LanguageSwitcher extends Component {
  render() {
    return (
      <LanguageContext.Consumer>
        {({ language, setLanguage }) => (
          <button onClick={() => setLanguage("jp")}>
            Switch Language (Current: {language})
          </button>
        )}
      </LanguageContext.Consumer>
    );
  }
}

এখানে আমি ভাষাটি 'জেপি' তে সেট করছি তবে এর জন্য ভাষা নির্ধারণ করতে আপনার নিজের যুক্তি থাকতে পারে।

৪. কোনও সরবরাহকারীকে গ্রাহককে মুড়িয়ে দেওয়া

এখন আমি আমার ভাষা পরিবর্তনকারী উপাদানটি একটিতে রেন্ডার করব LanguageContext.Providerএবং যে মানগুলিকে প্রসঙ্গের মাধ্যমে গভীরতর কোনও প্রান্তে প্রেরণ করতে হবে তা পাস করব। এখানে আমার পিতামাতার Appচেহারা কেমন:

class App extends Component {
  setLanguage = language => {
    this.setState({ language });
  };

  state = {
    language: "en",
    setLanguage: this.setLanguage
  };

  render() {
    return (
      <LanguageContext.Provider value={this.state}>
        <h2>Current Language: {this.state.language}</h2>
        <p>Click button to change to jp</p>
        <div>
          {/* Can be nested */}
          <LanguageSwitcher />
        </div>
      </LanguageContext.Provider>
    );
  }
}

এখন, যখনই ভাষা পরিবর্তনকারী ক্লিক করা হয় এটি প্রসঙ্গটি পরিবর্তনশীলভাবে আপডেট করে।

কোডস্যান্ডবক্স ডেমো

Question 3

মাইথানির উপরের উত্তরটি দুর্দান্ত সমাধান তবে হুক ব্যবহার না করেই এটি একটি শ্রেণি উপাদান। যেহেতু এটি কার্যকরী উপাদান এবং হুকগুলি ব্যবহার করার জন্য প্রতিক্রিয়া দ্বারা প্রস্তাবিত তাই আমি এটিকে ইউজকন্টেক্সট এবং ইউজস্টেট হুক দিয়ে প্রয়োগ করব। এখানে আপনি কীভাবে কোনও শিশু উপাদানগুলির মধ্যে থেকে প্রসঙ্গটি আপডেট করতে পারবেন।

ল্যাঙ্গুয়েজ কনটেক্সট ম্যানেজমেন্ট.জেএস

import React, { useState } from 'react'

export const LanguageContext = React.createContext({
  language: "en",
  setLanguage: () => {}
})

export const LanguageContextProvider = (props) => {

  const setLanguage = (language) => {
    setState({...state, language: language})
  }

  const initState = {
    language: "en",
    setLanguage: setLanguage
  } 

  const [state, setState] = useState(initState)

  return (
    <LanguageContext.Provider value={state}>
      {props.children}
    </LanguageContext.Provider>
  )
}

App.js

import React, { useContext } from 'react'
import { LanguageContextProvider, LanguageContext } from './LanguageContextManagement'

function App() {

  const state = useContext(LanguageContext)

  return (
    <LanguageContextProvider>
      <button onClick={() => state.setLanguage('pk')}>
        Current Language is: {state.language}
      </button>
    </LanguageContextProvider>
  )
}

export default App

Question 4

একটি সহজ সরল সমাধান হ'ল আপনার প্রসঙ্গে একটি সেটস্টেট পদ্ধতি অন্তর্ভুক্ত করে আপনার প্রসঙ্গে স্টেট সেট করা:

return ( 
            <Context.Provider value={{
              state: this.state,
              updateLanguage: (returnVal) => {
                this.setState({
                  language: returnVal
                })
              }
            }}> 
              {this.props.children} 
            </Context.Provider>
        )

এবং আপনার গ্রাহক হিসাবে, কল করুন আপডেট ভাষা যেমন:

// button that sets language config
<Context.Consumer>
{(context) => 
  <button onClick={context.updateLanguage({language})}> 
    Set to {language} // if you have a dynamic val for language
  </button>
<Context.Consumer>