প্রতিক্রিয়াতে কীভাবে বিশ্বব্যাপী পরিবর্তনশীল ঘোষণা করবেন?

Question 1

আমি i18nএকবার উপাদানতে অনুবাদ বস্তুর সূচনা করেছি (অ্যাপ্লিকেশনটিতে লোড হওয়া প্রথম উপাদান)। অন্যান্য একই উপাদানগুলিতে একই জিনিসটি প্রয়োজনীয়। আমি এটি প্রতিটি উপাদানগুলিতে পুনরায় আরম্ভ করতে চাই না। চারপাশে কি উপায়? এটিকে উইন্ডো স্কোপে উপলব্ধ করা কার্যকর হয় না কারণ আমাকে এটি render()পদ্ধতিতে ব্যবহার করা দরকার ।

এই সমস্যার জন্য একটি জেনেরিক সমাধান প্রস্তাব করুন এবং i18n নির্দিষ্ট সমাধান নয়।

Question 2

আপনি প্রসঙ্গটি ব্যবহার করার চেষ্টা করছেন না কেন ?

আপনি যে কোনও প্যারেন্ট উপাদানগুলিতে গ্লোবাল কনটেক্সট ভেরিয়েবল ঘোষণা করতে পারেন এবং এই পরিবর্তনশীলটি উপাদান উপাদানটি জুড়ে অ্যাক্সেসযোগ্য হবে this.context.varname। আপনাকে কেবলমাত্র প্যারেন্ট উপাদানগুলিতে নির্দিষ্ট করতে হবে childContextTypesএবং getChildContextতারপরে আপনি কেবলমাত্র contextTypesসন্তানের উপাদানটিতে নির্দিষ্ট করে কোনও উপাদান থেকে এটিকে ব্যবহার / পরিবর্তন করতে পারবেন ।

যাইহোক, দস্তাবেজে উল্লিখিত হিসাবে এটি একটি নোট নিন:

স্পষ্ট কোড লেখার সময় যেমন বৈশ্বিক চলকগুলি সর্বোত্তমভাবে এড়ানো যায়, আপনার বেশিরভাগ ক্ষেত্রে প্রসঙ্গ ব্যবহার করা এড়ানো উচিত। বিশেষত, "টাইপিং সংরক্ষণ করুন" ব্যবহার করার আগে এবং স্পষ্টভাবে প্রপসগুলি পাস করার পরিবর্তে এটি ব্যবহার করার আগে দু'বার ভাবেন।

Question 3

প্রতিক্রিয়া ছাড়িয়ে

আপনি হয়ত জানেন না যে একটি আমদানি ইতিমধ্যে বিশ্বব্যাপী । আপনি যদি কোনও বস্তু (সিঙ্গলটন) রফতানি করেন তবে তা আমদানি বিবৃতি হিসাবে বিশ্বব্যাপী অ্যাক্সেসযোগ্য এবং এটি বিশ্বব্যাপীও সংশোধিত হতে পারে ।

আপনি যদি বিশ্বব্যাপী কোনও কিছু শুরু করতে চান তবে একবারে এটির পরিবর্তিত পরিবর্তনটি নিশ্চিত করতে চান তবে আপনি এই সিঙ্গেলটন পদ্ধতির ব্যবহার করতে পারেন যা প্রাথমিকভাবে পরিবর্তনযোগ্য বৈশিষ্ট্য রয়েছে তবে আপনি আপনার আরম্ভের দৃশ্যেObject.freeze তার অপরিবর্তনীয় বিষয়টি নিশ্চিত করার জন্য এটির প্রথম ব্যবহারের পরে ব্যবহার করতে পারেন ।

const myInitObject = {}
export default myInitObject

তারপরে আপনার সূচনা পদ্ধতিতে এটি উল্লেখ করুন:

import myInitObject from './myInitObject'
myInitObject.someProp = 'i am about to get cold'
Object.freeze(myInitObject)

myInitObjectএখনও বিশ্বব্যাপী হতে হবে যেমন যে কোন জায়গায় উল্লেখ করা যেতে পারে একটি আমদানি যেমন কিন্তু হিমায়িত থাকবে এবং যে কেউ প্রচেষ্টা এটি পরিবর্তন করে নিক্ষেপ করা হবে।

প্রতিক্রিয়া-তৈরি-অ্যাপ ব্যবহার করা হয়

(আমি আসলে যা খুঁজছিলাম) এই পরিস্থিতিতে আপনি পরিবেশের ভেরিয়েবলগুলি উল্লেখ করার সময় বিশ্বব্যাপী অবজেক্টগুলিও পরিষ্কারভাবে সূচনা করতে পারেন।

অভ্যন্তরের উপসর্গযুক্তREACT_APP_ ভেরিয়েবলগুলি দ্বারা আপনার প্রকল্পের মূলে একটি .env ফাইল তৈরি করা বেশ সুন্দর করে। আপনার process.env.REACT_APP_SOME_VARপ্রয়োজন অনুসারে আপনি আপনার জেএস এবং জেএসএক্সের মধ্যে উল্লেখ করতে পারেন এবং এটি ডিজাইনের মাধ্যমে অপরিবর্তনীয়।

এটি window.myVar = %REACT_APP_MY_VAR%এইচটিএমএল স্থাপন করা এড়ায়।

এ সম্পর্কে আরও দরকারী বিশদ সরাসরি ফেসবুক থেকে দেখুন:

https://facebook.github.io/create-react-app/docs/adding-custom-enomot- পরিবর্তনশীল

Question 4

প্রস্তাবিত নয় তবে .... আপনি আপনার গ্লোবাল ভেরিয়েবল ট্রট এটি যোগ করতে আপনার অ্যাপ্লিকেশন শ্রেণি থেকে উপাদান উইলমাউন্ট ব্যবহার করতে পারেন ... কিছুটা এরকম:

componentWillMount: function () {
    window.MyVars = {
        ajax: require('../helpers/ajax.jsx'),
        utils: require('../helpers/utils.jsx')
    };
}

এখনও এটি একটি হ্যাক হিসাবে বিবেচনা করুন ... তবে এটি আপনার কাজটি সম্পন্ন করবে

বিটিডব্লিউ কম্পোনেন্ট উইলমাউন্ট রেন্ডারিংয়ের আগে একবার কার্যকর করে, এখানে আরও দেখুন: https://reactjs.org/docs/react-component.html#mounting-componentwillmount

Question 5

এই কনটেন্টটি দিয়ে ./src ফোল্ডারে "config.js" নামে একটি ফাইল তৈরি করুন:

module.exports = global.config = {
    i18n: {
        welcome: {
            en: "Welcome",
            fa: "خوش آمدید"
        }
        // rest of your translation object
    }
    // other global config variables you wish
};

আপনার প্রধান ফাইল "index.js" এ এই লাইনটি রাখুন:

import './config';

আপনার অবজেক্টের যেদিকেই আপনার প্রয়োজন এটি ব্যবহার করুন:

global.config.i18n.welcome.en

Question 6

ওয়েবপ্যাকে বৈশ্বিক ভেরিয়েবল রাখতে পারে যেমন তে webpack.config.js

externals: {
  'config': JSON.stringify(GLOBAL_VARIABLE: "global var value")
}

জেএসে মডিউলটি পড়তে পারেন

var config = require('config')
var GLOBAL_VARIABLE = config.GLOBAL_VARIABLE

আশা করি এটি সাহায্য করবে।

Question 7

আমি এখনও অবধি সবচেয়ে ভাল উপায়টি খুঁজে পেয়েছি প্রতিক্রিয়া প্রসঙ্গটি ব্যবহার করা কিন্তু এটি একটি উচ্চ অর্ডার সরবরাহকারী উপাদানটির মধ্যে আলাদা করা ।

Question 8

আপনি https://facebook.github.io/react/docs/reusable-components.html#mixins প্রতিক্রিয়াতে মিক্সিন ব্যবহার করতে পারেন ।

Question 9

এখানে আমরা একটি আধুনিক পদ্ধতির ব্যবহার করছি globalThis, আমরা আমাদের প্রতিক্রিয়া নেটিভ অ্যাপ্লিকেশনটি গ্রহণ করেছি।

globalThis এখন অন্তর্ভুক্ত করা হয়েছে ...

আধুনিক ব্রাউজারগুলি - এমডিএন ডকুমেন্টেশন
টাইপস্ক্রিপ্ট ৩.৪ - হ্যান্ডবুক ডকুমেন্টেশন
ESLint v7 - নোট প্রকাশ করুন

_{appGlobals.ts}

// define our parent property accessible via globalThis. Also apply the TypeScript type.
var app: globalAppVariables;

// define the child properties and their types. 
type globalAppVariables = {
  messageLimit: number;
  // more can go here. 
};

// set the values.
globalThis.app = {
  messageLimit: 10,
  // more can go here.
};


// Freeze so these can only be defined in this file.
Object.freeze(globalThis.app);

_{App.tsx ( আমাদের মূল এন্ট্রি পয়েন্ট ফাইল )}

import './appGlobals'

// other code

_{যে কোনও জায়গায়ElseInTheapp.tsx}

const chatGroupQuery = useQuery(GET_CHAT_GROUP_WITH_MESSAGES_BY_ID, {
  variables: {
    chatGroupId,
    currentUserId: me.id,
    messageLimit: globalThis.app.messageLimit, // 👈 used here.
  },
});

Question 10

আমি জানি না যে তারা এই "প্রতিক্রিয়া প্রসঙ্গে" স্টাফ দিয়ে কী বলতে চাইছেন - তারা আমার সাথে গ্রীক ভাষায় কথা বলছেন, তবে আমি কীভাবে এটি করেছি তা এখানে:

একই পৃষ্ঠায় ফাংশনের মধ্যে মান বহন করা

আপনার কনস্ট্রাক্টরে, আপনার সেটারটি বেঁধে রাখুন:

this.setSomeVariable = this.setSomeVariable.bind(this);

তারপরে আপনার কনস্ট্রাক্টরের ঠিক নীচে কোনও ফাংশন ঘোষণা করুন:

setSomeVariable(propertyTextToAdd) {
    this.setState({
        myProperty: propertyTextToAdd
    });
}

আপনি এটি সেট করতে চাইলে, কল করুন this.setSomeVariable("some value");

(আপনি এমনকি সাথে পালাতে সক্ষম হতে পারে this.state.myProperty = "some value";)

আপনি এটি পেতে চাইলে, কল করুন var myProp = this.state.myProperty;

ব্যবহার alert(myProp);করা আপনাকে দেওয়া উচিত some value।

পৃষ্ঠাগুলি / উপাদানগুলিতে মান বহন করার জন্য অতিরিক্ত স্ক্যাফোোল্ডিং পদ্ধতি

আপনি this(প্রযুক্তিগতভাবে this.stores) একটি মডেল বরাদ্দ করতে পারেন, সুতরাং আপনি এটির সাথে এটি উল্লেখ করতে পারেন this.state:

import Reflux from 'reflux'
import Actions from '~/actions/actions`

class YourForm extends Reflux.Store
{
    constructor()
    {
        super();
        this.state = {
            someGlobalVariable: '',
        };
        this.listenables = Actions;
        this.baseState = {
            someGlobalVariable: '',
        };
    }

    onUpdateFields(name, value) {
        this.setState({
            [name]: value,
        });
    }

    onResetFields() {
        this.setState({
           someGlobalVariable: '',
        });
    }
}
const reqformdata = new YourForm

export default reqformdata

এটি storesহিসাবে পরিচিত ফোল্ডারে এটি সংরক্ষণ করুন yourForm.jsx।

তারপরে আপনি অন্য পৃষ্ঠায় এটি করতে পারেন:

import React from 'react'
import Reflux from 'reflux'
import {Form} from 'reactstrap'
import YourForm from '~/stores/yourForm.jsx'

Reflux.defineReact(React)

class SomePage extends Reflux.Component {
    constructor(props) {
        super(props);
        this.state = {
            someLocalVariable: '',
        }
        this.stores = [
            YourForm,
        ]
    }
    render() {

        const myVar = this.state.someGlobalVariable;
        return (
            <Form>
                <div>{myVar}</div>
            </Form>
        )
    }
}
export default SomePage

আপনি যদি this.state.someGlobalVariableকোনও ফাংশন ব্যবহার করে অন্য উপাদানটিতে সেট করে থাকেন:

setSomeVariable(propertyTextToAdd) {
    this.setState({
       myGlobalVariable: propertyTextToAdd
   });
}

যেটি দিয়ে আপনি কনস্ট্রাক্টরে আবদ্ধ হন:

this.setSomeVariable = this.setSomeVariable.bind(this);

উপরের কোডটি ব্যবহার করে মানটি propertyTextToAddপ্রদর্শিত হবে SomePage।