আমার একাধিক উপাদান রয়েছে যা সকলকে একই জিনিস করা দরকার। (একটি সাধারণ ফাংশন যা তাদের সন্তানের উপাদানগুলির উপরে মানচিত্র তৈরি করে এবং প্রত্যেককে কিছু করে)। এই মুহুর্তে আমি প্রতিটি উপাদানটিতে এই পদ্ধতিটি সংজ্ঞায়িত করছি। তবে আমি এটি একবারই সংজ্ঞায়িত করতে চাই।
আমি এটি শীর্ষ স্তরের উপাদানটিতে সংজ্ঞায়িত করতে পারি এবং তারপরে এটিকে প্রপস হিসাবে পাস করতে পারি। তবে সেটা মোটেও ঠিক মনে হচ্ছে না। এটি প্রোপের চেয়ে একটি লাইব্রেরি ফাংশন। (এটা আমার মনে হচ্ছে).
এটি করার সঠিক উপায় কী?
উত্তর:
আপনি ভালো কিছু ব্যবহার করেন তাহলে browserify তারপর আপনি একটি বহিস্থিত ফাইল অর্থাত util.js যে রপ্তানির কিছু ইউটিলিটি ফাংশন থাকতে পারে।
var doSomething = function(num) {
return num + 1;
}
exports.doSomething = doSomething;
তারপরে এটি প্রয়োজনীয় হিসাবে প্রয়োজন
var doSomething = require('./util.js').doSomething;
Utils.jsএকাধিক ফাংশন ইত্যাদির সাহায্যে ফাইলটি তৈরি করুন
const someCommonValues = ['common', 'values'];
export const doSomethingWithInput = (theInput) => {
//Do something with the input
return theInput;
};
export const justAnAlert = () => {
alert('hello');
};
তারপরে আপনার যে উপাদানগুলিতে আপনি ব্যবহারের ফাংশনগুলি ব্যবহার করতে চান সেগুলিতে প্রয়োজনীয় নির্দিষ্ট ফাংশন আমদানি করুন। আপনাকে সবকিছু আমদানি করতে হবে না
import {doSomethingWithInput, justAnAlert} from './path/to/utils.js/file'
এবং তারপরে উপাদানগুলির মধ্যে এই ফাংশনগুলি ব্যবহার করুন:
justAnAlert();
<p>{doSomethingWithInput('hello')}</p>
/fileআমদানি লাইনের শেষে কী ?
যদি আপনি সহায়তার কার্যগুলিতে রাষ্ট্রের কৌশলটি পরিচালনা করতে চান তবে এটি অনুসরণ করুন:
একটি হেল্পার্স.জেএস ফাইল তৈরি করুন:
export function myFunc(){
return this.state.name; //define it according to your needs
}
আপনার উপাদান ফাইলে সহায়তা ফাংশন আমদানি করুন:
import {myFunc} from 'path-to/Helpers.js'
আপনার কনস্ট্রাক্টরে ক্লাসে সেই সহায়ক ফাংশন যুক্ত করুন
constructor(){
this.myFunc = myFunc.bind(this)
}
আপনার রেন্ডার ফাংশনে এটি ব্যবহার করুন:
render(){
<div>{this.myFunc()}</div>
}
আপনি কীভাবে FetchUtil.handleErrorএকটি প্রতিক্রিয়া উপাদান ( App) এর কোনও ফাংশন ( ) পুনরায় ব্যবহার করতে পারেন তার কয়েকটি উদাহরণ এখানে ।
module.exports = {
handleError: function(response) {
if (!response.ok) throw new Error(response.statusText);
return response;
},
};
ব্যবহার / ফেচUtil.js
const createReactClass = require('create-react-class');
const FetchUtil = createReactClass({
statics: {
handleError: function(response) {
if (!response.ok) throw new Error(response.statusText);
return response;
},
},
render() {
},
});
export default FetchUtil;
দ্রষ্টব্য: আপনি যদি v15.4 (বা নীচে) প্রতিক্রিয়া ব্যবহার করে থাকেন তবে আপনাকে createClassনিম্নলিখিত হিসাবে আমদানি করতে হবে :
import React from 'react';
const FetchUtil = React.createClass({});
সূত্র: https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactcreateclass
উপাদান / App.jsx
import Categories from './Categories.jsx';
import FetchUtil from '../utils/FetchUtil';
import Grid from 'material-ui/Grid';
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {categories: []};
}
componentWillMount() {
window
.fetch('/rest/service/v1/categories')
.then(FetchUtil.handleError)
.then(response => response.json())
.then(categories => this.setState({...this.state, categories}));
}
render() {
return (
<Grid container={true} spacing={16}>
<Grid item={true} xs={12}>
<Categories categories={this.state.categories} />
</Grid>
</Grid>
);
}
}
export default App;
ব্যবহার ফাইল তৈরি করা ছাড়া আর একটি শক্ত বিকল্প হ'ল একটি withComponentMapper()মোড়ক তৈরির জন্য একটি উচ্চতর অর্ডার উপাদান ব্যবহার করা । এই উপাদানটি প্যারামিটার হিসাবে কোনও উপাদান গ্রহণ করবে এবং componentMapper()প্রপস হিসাবে ফাংশনটি দিয়ে এটি ফিরিয়ে দেবে।
এটি প্রতিক্রিয়া হিসাবে একটি ভাল অনুশীলন হিসাবে বিবেচিত হয়। আপনি কীভাবে এখানে এটি বিশদভাবে করবেন তা জানতে পারেন।
কোনও ইউটিলিটি ফাংশনের মতো মনে হচ্ছে, সেক্ষেত্রে এটিকে আলাদা স্ট্যাটিক ইউটিলিটি মডিউলে কেন রাখবেন না?
অন্যথায় যদি বাবেলের মতো ট্রান্সপ্লেলার ব্যবহার করে আপনি এস 7 এর স্থির পদ্ধতি ব্যবহার করতে পারেন:
class MyComponent extends React.Component {
static someMethod() { ...
অন্যথায় আপনি যদি React.createClass ব্যবহার করছেন তবে আপনি স্ট্যাটিক্স অবজেক্টটি ব্যবহার করতে পারেন :
var MyComponent = React.createClass({
statics: {
customMethod: function(foo) {
return foo === 'bar';
}
}
তবে আমি এই বিকল্পগুলির পরামর্শ দিচ্ছি না, কোনও ইউটিলিটি পদ্ধতির জন্য কোনও উপাদান অন্তর্ভুক্ত করার কোনও মানে নেই।
প্রপস হিসাবে আপনার সমস্ত উপাদানগুলির মধ্য দিয়ে কোনও পদ্ধতি অবতরণ করা উচিত নয় এটি এটি দৃ tight়ভাবে তাদের জোড়া দেবে এবং রিফ্যাক্টরিংকে আরও বেদনাদায়ক করে তুলবে। আমি একটি সরল পুরানো ইউটিলিটি মডিউলটি পরামর্শ দিই।
ক্লাসটি প্রসারিত করার জন্য অন্য বিকল্পটি হ'ল মিক্সিন ব্যবহার করা, তবে আমি সুপারিশ করি না যেহেতু আপনি এস 6+ এ এটি করতে পারবেন না (এবং আমি এই ক্ষেত্রে কোনও উপকার দেখতে পাচ্ছি না)।
React.createClass15.5.0 প্রতিক্রিয়া দেখানোর পরে অবহেলা করা হয়েছে। তৈরি-প্রতিক্রিয়া-অ্যাপ্লিকেশন create-react-classপরিবর্তে এনপিএম মডিউল ব্যবহারের পরামর্শ দেয় ।
doSomething.js, যেমন একাধিক অনুরূপ "ইউটিলিটি" ফাংশনযুক্ত একটি ফাইল যেমন utils.jsআপনি যে ফাংশনগুলি ব্যবহার করতে হবে সেগুলি আমদানি করুন
আমি নীচে দুটি শৈলী প্রদর্শন করব এবং উপাদানগুলির যুক্তি একে অপরের সাথে কতটা যুক্ত তার উপর নির্ভর করে আপনি চয়ন করতে চান।
স্টাইল 1 - তুলনামূলকভাবে সম্পর্কিত উপাদানগুলি এর মধ্যে কলব্যাক রেফারেন্স সহ তৈরি করা যেতে পারে ./components/App.js...
<SomeItem
ref={(instance) => {this.childA = instance}}
/>
<SomeOtherItem
ref={(instance) => {this.childB = instance}}
/>
এবং তারপরে আপনি তাদের মাঝে ভাগ করে নেওয়া ফাংশনগুলি ব্যবহার করতে পারেন ...
this.childA.investigateComponent(this.childB); // call childA function with childB as arg
this.childB.makeNotesOnComponent(this.childA); // call childB function with childA as arg
স্টাইল 2 - util-টাইপ উপাদান যাবে নির্মিত এই মত, ./utils/time.js...
export const getTimeDifference = function (start, end) {
// return difference between start and end
}
এবং তারপরে সেগুলিকে এভাবে ব্যবহার করা যেতে পারে ./components/App.js...
import React from 'react';
import {getTimeDifference} from './utils/time.js';
export default class App extends React.Component {
someFunction() {
console.log(getTimeDifference("19:00:00", "20:00:00"));
}
}
কোনটি ব্যবহার করবেন?
যদি যুক্তি তুলনামূলকভাবে সম্পর্কিত হয় (তারা কেবল একই অ্যাপে একসাথে ব্যবহৃত হয়), তবে আপনার উপাদানগুলির মধ্যে রাজ্যগুলি ভাগ করা উচিত। তবে যদি আপনার যুক্তি দূর থেকে সম্পর্কিত (যেমন, গণিতের ব্যবহার, পাঠ্য-বিন্যাসের ব্যবহার) হয় তবে আপনার ব্যবহার শ্রেণীর ফাংশনগুলি তৈরি এবং আমদানি করা উচিত।
আপনি কি এই জন্য একটি মেশিন ব্যবহার করবেন না? Https://facebook.github.io/react/docs/reusable-components.html দেখুন
যদিও তারা অনুগ্রহের বাইরে চলে যাচ্ছে https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750 দেখুন
দরকারী হতে পারে