জেএসএক্সে "এক্সপোর্ট ডিফল্ট" কী করে?


151

আমি বলতে চাই যে শেষ বাক্যটির অর্থ কী এবং কী হয় (এক্সপোর্ট ডিফল্ট হ্যালো ওয়ার্ল্ড;) তবে আমি এটি সম্পর্কে কোনও টিউটোরিয়াল খুঁজে পাই না।

// hello-world.jsx

import React from 'react';

class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

export default HelloWorld;

উত্তর:


302

রপ্তানি মত export default HelloWorld;এবং আমদানি যেমন import React from 'react'অংশ ES6 মডিউল সিস্টেম

একটি মডিউল একটি স্ব অন্তর্ভুক্ত ইউনিট যা ব্যবহার করে অন্যান্য মডিউলগুলিতে সম্পদ প্রকাশ করতে পারে exportএবং ব্যবহার করে অন্যান্য মডিউল থেকে সম্পদ অর্জন করতে পারে import

আপনার কোডে:

import React from 'react'; // get the React object from the react module

class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

export default HelloWorld; // expose the HelloWorld component to other modules

ES6 এ দুই ধরণের রফতানি রয়েছে:

নামযুক্ত রপ্তানির - উদাহরণস্বরূপ export function func() {}নামে একটি নামাঙ্কিত রপ্তানি হয় func। নামযুক্ত মডিউলগুলি ব্যবহার করে আমদানি করা যায় import { exportName } from 'module';.এই ক্ষেত্রে, আমদানির নামটি রফতানির নামের মতো হওয়া উচিত। উদাহরণস্বরূপ ফানকটি আমদানি করতে আপনাকে ব্যবহার করতে হবে import { func } from 'module';। একটি মডিউলে একাধিক নামের রফতানি হতে পারে।

ডিফল্ট রফতানি - এমন মান যা মডিউল থেকে আমদানি করা হবে, যদি আপনি সাধারণ আমদানির বিবৃতি ব্যবহার করেন import X from 'module'। এক্স হল এমন একটি নাম যা স্থানীয়ভাবে ভেরিয়েবলকে এই মানটি নির্ধারিত হিসাবে দেওয়া হবে এবং এটির নাম রফতানি রফতানির মতো রাখতে হবে না। কেবলমাত্র একটি ডিফল্ট রফতানি হতে পারে।

একটি মডিউলে নামকরণকৃত রফতানি এবং একটি ডিফল্ট এক্সপোর্ট উভয়ই থাকতে পারে এবং সেগুলি ব্যবহার করে একসাথে আমদানি করা যায় import defaultExport, { namedExport1, namedExport3, etc... } from 'module';


24

export default স্ক্রিপ্ট ফাইল থেকে একক শ্রেণি, ফাংশন বা আদিম রফতানি করতে ব্যবহৃত হয়।

রফতানি হিসাবে লেখা যেতে পারে

export default class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

আপনি এটি যেমন একটি ফাংশন উপাদান হিসাবে লিখতে পারে

export default const HelloWorld = () => (<p>Hello, world!</p>);

এটি অন্য স্ক্রিপ্ট ফাইলে এই ফাংশনটি আমদানি করতে ব্যবহৃত হয়

import HelloWorld from './HelloWorld';

এটি HelloWorldডিফল্ট রফতানি হিসাবে আপনি যে কোনও নাম দিতে পারেন হিসাবে আপনি অগত্যা এটি আমদানি করবেন না

রফতানি সম্পর্কে একটু

নামটি যেমন বলেছে, এটি স্ক্রিপ্ট ফাইল বা মডিউল থেকে ফাংশন, অবজেক্ট, শ্রেণি বা এক্সপ্রেশন রফতানি করতে ব্যবহৃত হয়

Utiliites.js

export function cube(x) {
  return x * x * x;
}
export const foo = Math.PI + Math.SQRT2;

এটি আমদানি এবং হিসাবে ব্যবহার করা যেতে পারে

App.js

import { cube, foo } from 'Utilities';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

অথবা

import * as utilities from 'Utilities';
console.log(utilities.cube(3)); // 27
console.log(utilities.foo);    // 4.555806215962888

যখন রফতানি ডিফল্ট ব্যবহৃত হয়, এটি অনেক সহজ। স্ক্রিপ্ট ফাইলগুলি কেবল একটি জিনিস রফতানি করে। cube.js

export default function cube(x) {
  return x * x * x;
};

এবং App.js হিসাবে ব্যবহৃত

import Cube from 'cube';
console.log(Cube(3)); // 27

11

সাধারণ কথায় -

মডিউল থেকে ফাংশন, অবজেক্টস বা আদিম মান রফতানি করতে জাভাস্ক্রিপ্ট মডিউল তৈরি করার সময় রফতানি বিবৃতি ব্যবহৃত হয় যাতে তারা আমদানি বিবৃতি সহ অন্যান্য প্রোগ্রামগুলি ব্যবহার করতে পারে।

পরিষ্কার বোঝার জন্য এখানে একটি লিঙ্ক রয়েছে: এমডিএন ওয়েব ডক্স


8

জন্য সহজ বোঝাপড়া default exportহয়

Export ES6 এর বৈশিষ্ট্য যা মডিউল (ফাইল) রফতানি করতে এবং অন্য কোনও মডিউল (ফাইল) এ ব্যবহার করতে ব্যবহৃত হয়।

ডিফল্ট রফতানি:

  1. default export কনভেনশনটি হ'ল যদি আপনি ফাইল (মডিউল) থেকে কেবল একটি অবজেক্ট (ভেরিয়েবল, ফাংশন, ক্লাস) রফতানি করতে চান।
  2. প্রতি ফাইলটিতে কেবলমাত্র একটি ডিফল্ট রফতানি হতে পারে, তবে কেবলমাত্র একটি রফতানিতেই সীমাবদ্ধ নয়
  3. যখন ডিফল্ট রফতানি হওয়া অবজেক্টটি আমদানি করা হয় তখন আমরা এটির নামও পরিবর্তন করতে পারি।

রফতানি বা নামযুক্ত রফতানি:

  1. এটি একই নামের সাথে অবজেক্টটি (পরিবর্তনশীল, ফাংশন, ক্যালস) রফতানি করতে ব্যবহৃত হয়।

  2. এটি এক ফাইল থেকে একাধিক বস্তু রফতানি করতে ব্যবহৃত হয়।

  3. অন্য কোনও ফাইলে আমদানি করার সময় এর নাম পরিবর্তন করা যায় না, এটি রফতানি করার জন্য একই নাম ব্যবহার করা উচিত।

প্রতিক্রিয়া, ভ্যু এবং অন্যান্য অনেকগুলি ফ্রেমওয়ার্কে রফতানিটি বেশিরভাগ ক্ষেত্রে পুনরায় ব্যবহারযোগ্য উপাদানগুলি মডিউলার ভিত্তিক অ্যাপ্লিকেশনগুলি তৈরি করতে রফতানি করতে ব্যবহৃত হয়।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.