বেশ কয়েকটি সমাধানের চেষ্টা করার পরে, আমি মনে করি যে আমি একটি কার্যকরভাবে খুঁজে পেয়েছি এবং এটি প্রতিক্রিয়া 0.14 এর প্রতিক্রিয়া (যেমন এটি মিক্সিনগুলি ব্যবহার করে না, তবে উচ্চতর আদেশের উপাদানগুলি) হওয়া উচিত ( সম্পাদনা : অবশ্যই 15 টি প্রতিক্রিয়া সহ পুরোপুরি ঠিক আছে! )।
সুতরাং এখানে সমাধানটি নীচে থেকে শুরু করে (পৃথক উপাদানগুলি):
কম্পোনেন্ট
আপনার উপাদানগুলির কেবলমাত্র প্রয়োজন (কনভেনশন দ্বারা), একটি stringsপ্রপস। এটি এমন উপাদান হওয়া উচিত যা আপনার উপাদানগুলির বিভিন্ন স্ট্রিং যুক্ত করে তবে এটির আকারটি আপনার উপর নির্ভর করে।
এটিতে ডিফল্ট অনুবাদগুলি রয়েছে, সুতরাং আপনি কোনও অনুবাদ দেওয়ার প্রয়োজন ছাড়াই উপাদানটি অন্য কোথাও ব্যবহার করতে পারেন (এটি উদাহরণস্বরূপ ডিফল্ট ভাষা, ইংরেজী সহ বাক্সটির বাইরে কাজ করবে)
import { default as React, PropTypes } from 'react';
import translate from './translate';
class MyComponent extends React.Component {
render() {
return (
<div>
{ this.props.strings.someTranslatedText }
</div>
);
}
}
MyComponent.propTypes = {
strings: PropTypes.object
};
MyComponent.defaultProps = {
strings: {
someTranslatedText: 'Hello World'
}
};
export default translate('MyComponent')(MyComponent);
উচ্চতর আদেশের উপাদান
পূর্ববর্তী স্নিপেটে, আপনি এটি সম্ভবত শেষ লাইনে লক্ষ্য করেছেন:
translate('MyComponent')(MyComponent)
translate এক্ষেত্রে একটি উচ্চতর অর্ডার উপাদান যা আপনার উপাদানটিকে মোড়ানো করে এবং কিছু অতিরিক্ত কার্যকারিতা সরবরাহ করে (এই নির্মাণটি প্রতিক্রিয়াটির পূর্ববর্তী সংস্করণগুলির মিশ্রণগুলি প্রতিস্থাপন করে)।
প্রথম যুক্তিটি একটি কী যা অনুবাদ ফাইলটিতে অনুবাদগুলি অনুসন্ধান করতে ব্যবহৃত হবে (আমি এখানে উপাদানটির নামটি ব্যবহার করেছি, তবে এটি কিছু হতে পারে)। দ্বিতীয়টি (খেয়াল করুন যে ফাংশনটি কারি করা হয়েছে, ES7 সজ্জকারকে অনুমতি দেওয়ার জন্য) নিজেই অংশটি মোড়ানো হয়।
অনুবাদ উপাদানটির কোড এখানে:
import { default as React } from 'react';
import en from '../i18n/en';
import fr from '../i18n/fr';
const languages = {
en,
fr
};
export default function translate(key) {
return Component => {
class TranslationComponent extends React.Component {
render() {
console.log('current language: ', this.context.currentLanguage);
var strings = languages[this.context.currentLanguage][key];
return <Component {...this.props} {...this.state} strings={strings} />;
}
}
TranslationComponent.contextTypes = {
currentLanguage: React.PropTypes.string
};
return TranslationComponent;
};
}
এটি যাদু নয়: এটি প্রসঙ্গটি থেকে কেবলমাত্র বর্তমান ভাষাটি পড়বে (এবং সেই প্রসঙ্গটি কোড বেজ জুড়ে সমস্ত প্রবাহিত হয় না, কেবলমাত্র এই র্যাপারে এখানে ব্যবহৃত হয়) এবং তারপরে লোড হওয়া ফাইলগুলি থেকে প্রাসঙ্গিক স্ট্রিংগুলি পাওয়া যাবে। এই উদাহরণটিতে যুক্তির এই অংশটি বেশ নির্বোধ, আপনি যেভাবে চান সত্যিই এটি করা যেতে পারে।
গুরুত্বপূর্ণ অংশটি হ'ল এটি বর্তমান ভাষাটিকে প্রসঙ্গ থেকে নিয়ে যায় এবং কী সরবরাহ করে তা স্ট্রিংগুলিতে রূপান্তর করে।
শ্রেণিবিন্যাসের একেবারে শীর্ষে
মূল উপাদানটিতে, আপনার কেবলমাত্র আপনার বর্তমান অবস্থা থেকে বর্তমান ভাষা সেট করা দরকার। নিম্নলিখিত উদাহরণটি রেডাক্সকে ফ্লাক্স-এর মতো বাস্তবায়ন হিসাবে ব্যবহার করছে তবে এটি অন্য কোনও কাঠামো / প্যাটার্ন / লাইব্রেরি ব্যবহার করে সহজেই রূপান্তর করা যায়।
import { default as React, PropTypes } from 'react';
import Menu from '../components/Menu';
import { connect } from 'react-redux';
import { changeLanguage } from '../state/lang';
class App extends React.Component {
render() {
return (
<div>
<Menu onLanguageChange={this.props.changeLanguage}/>
<div className="">
{this.props.children}
</div>
</div>
);
}
getChildContext() {
return {
currentLanguage: this.props.currentLanguage
};
}
}
App.propTypes = {
children: PropTypes.object.isRequired,
};
App.childContextTypes = {
currentLanguage: PropTypes.string.isRequired
};
function select(state){
return {user: state.auth.user, currentLanguage: state.lang.current};
}
function mapDispatchToProps(dispatch){
return {
changeLanguage: (lang) => dispatch(changeLanguage(lang))
};
}
export default connect(select, mapDispatchToProps)(App);
এবং শেষ করতে, অনুবাদ ফাইলগুলি:
অনুবাদ ফাইল
// en.js
export default {
MyComponent: {
someTranslatedText: 'Hello World'
},
SomeOtherComponent: {
foo: 'bar'
}
};
// fr.js
export default {
MyComponent: {
someTranslatedText: 'Salut le monde'
},
SomeOtherComponent: {
foo: 'bar mais en français'
}
};
তোমরা কি ভাবো?
আমার মনে হয় যে আমি আমার প্রশ্নটি এড়াতে চাইছিলাম সে সমস্ত সমস্যার সমাধান করে: অনুবাদ যুক্তিটি উত্স কোডের সমস্ত অংশে রক্তপাত হয় না, এটি বেশ বিচ্ছিন্ন এবং এটিগুলি ছাড়াই উপাদানগুলি পুনরায় ব্যবহার করার অনুমতি দেয়।
উদাহরণস্বরূপ, মাইকম্পোনপোন্টটি অনুবাদ () দ্বারা মোড়ানোর দরকার নেই এবং এটি পৃথক হতে পারে, যার ফলে অন্য যে কোনও ব্যক্তি stringsতাদের নিজস্ব মাধ্যমে এটি সরবরাহ করতে ইচ্ছুক পুনরায় ব্যবহার করতে পারে ।
[সম্পাদনা: ৩১/০৩/২০১ Re]: আমি সম্প্রতি একটি প্রতিক্রিয়াশীল বোর্ডে (এগ্রিল রেট্রোস্পেক্টিভসের জন্য) কাজ করেছি, যা প্রতিক্রিয়া ও রেডাক্স দিয়ে নির্মিত, এবং বহুভাষিক। যেহেতু প্রচুর লোক মন্তব্যগুলিতে একটি বাস্তব জীবনের উদাহরণ চেয়েছিল, তাই এটি এখানে:
আপনি কোডটি এখানে পাবেন: https://github.com/antoinejaussoin/retro-board/tree/master