কেন es6 প্রতিক্রিয়া উপাদান কেবল "এক্সপোর্ট ডিফল্ট" দিয়ে কাজ করে?

Question

এই উপাদানটি কাজ করে:

export class Template extends React.Component {
    render() {
        return (
            <div> component </div>
        );
    }
};
export default Template;

আমি যদি শেষ সারিটি সরিয়ে ফেলি তবে এটি কার্যকর হয় না।

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

আমার ধারণা, এস এস সিনট্যাক্সে আমি কিছু বুঝতে পারি না। এটি কি "ডিফল্ট" চিহ্ন ছাড়া রফতানি করতে হবে না?

Comments

আপনি লিখতে পারেন export default class Template extends React.Component {

— andykenward

আমি জানি. তবে কীভাবে আমি "ডিফল্ট" ছাড়াই রফতানি করা উপাদানগুলি আমদানি করতে পারি? এটি সম্ভব হওয়া উচিত

— stkvtflw

@stkvtflw আমি যদি আপনার প্রশ্নের উত্তর দিয়ে থাকি তবে দয়া করে এটি গ্রহণ করুন যাতে অন্য ব্যবহারকারীরাও উপকৃত হতে পারেন।

— জেদ রিচার্ডস

Answer 1

ছাড়াই রফতানি defaultমানে এটি একটি "নামযুক্ত রফতানি"। আপনার একক ফাইলে একাধিক নামের রফতানি থাকতে পারে। সুতরাং আপনি যদি এটি করেন,

class Template {}
class AnotherTemplate {}

export { Template, AnotherTemplate }

তাহলে আপনাকে এই রফতানিগুলির সঠিক নাম ব্যবহার করে আমদানি করতে হবে। সুতরাং অন্য উপাদানগুলিতে এই উপাদানগুলি ব্যবহার করতে আপনাকে করতে হবে,

import {Template, AnotherTemplate} from './components/templates'

বিকল্প হিসাবে আপনি যদি defaultরফতানির মতো রফতানি করে থাকেন,

export default class Template {}

তারপর অন্য ফাইল আপনি ব্যবহার না করেই ডিফল্ট রপ্তানি আমদানি {}, এই মত,

import Template from './components/templates'

প্রতি ফাইলটিতে কেবল একটি ডিফল্ট রফতানি হতে পারে। প্রতিক্রিয়াতে এটি একটি ফাইল থেকে একটি উপাদান রপ্তানি করার জন্য একটি সম্মেলন, এবং এটি রফতানি করা ডিফল্ট রফতানি হিসাবে।

আপনি আমদানি করার সাথে সাথে আপনি ডিফল্ট রফতানির নাম পরিবর্তন করতে পারেন,

import TheTemplate from './components/templates'

এবং আপনি একই সময়ে ডিফল্ট এবং নামযুক্ত রফতানি আমদানি করতে পারেন,

import Template,{AnotherTemplate} from './components/templates'

Comments

ঠিক আছে. তবে এটি আর একটি আপাতদৃষ্টিতে স্বেচ্ছাসেবী সিদ্ধান্তের মতো বলে মনে হচ্ছে যা আমি যুক্তি দেখছি না তবে মুখস্থ করতে হবে। আমি কি এরকম কোনও ভাল কারণ মিস করছি? অনেক প্রকল্পে কয়েক ডজন প্রতিক্রিয়া উপাদান থাকবে। প্রতিটি তার নিজস্ব ফাইল থাকা, যতই ছোট লাগে না কেন, কিছুটা মলদ্বার। এটি বিশেষত বেদনাদায়ক হয়ে ওঠে যদি তাদের বেশিরভাগ সাহায্যকারী ফাংশনগুলি ভাগ করে দেয়। এটি সিঙ্কে রাখার জন্য আরও লাইন স্টাফ তৈরি করে যা কিছুটা সদৃশ বলে মনে হচ্ছে। আমি কী মিস করছি?

ধন্যবাদ. আমার মনে হয় আপনি পুরোপুরি উত্তর এই ব্যাখ্যা করেছিলেন: import React, {Component} from 'react';।

— কিয়ান চেন

ভাল উত্তর. আমার এতে যুক্ত করার মতো কিছু আছে: আমদানির বিবৃতিগুলি এর মতো ব্যবহার করার চেষ্টা করুন: import RaisedButton from 'material-ui/RaisedButton'; পরিবর্তে import {RaisedButton} from 'material-ui'; এটি আপনার বিল্ড প্রক্রিয়াটিকে আরও দ্রুত এবং আপনার বিল্ড আউটপুট আরও ছোট করে তুলবে।

— শেখর কুমার

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/... developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...

— xgqfrms

@ শেখরকুমার কি আপনার import Binding from 'module/Binding'চেয়ে বেশি দক্ষ হওয়ার জন্য কোন উত্স আছে import {Binding} from 'module'?

— জীবন তখার

Answer 2

আমদানি ও রফতানি করার সময় {Add যুক্ত করুন: export { ... };| import { ... } from './Template';

এক্সপোর্ট →import { ... } from './Template'

রফতানি ডিফল্ট →import ... from './Template'

---

এখানে একটি কার্যকারী উদাহরণ:

// ExportExample.js
import React from "react";

function DefaultExport() {
  return "This is the default export";
}

function Export1() {
  return "Export without default 1";
}

function Export2() {
  return "Export without default 2";
}

export default DefaultExport;
export { Export1, Export2 };

---

// App.js
import React from "react";
import DefaultExport, { Export1, Export2 } from "./ExportExample";

export default function App() {
  return (
    <>
      <strong>
        <DefaultExport />
      </strong>
      <br />
      <Export1 />
      <br />
      <Export2 />
    </>
  );
}

Around চারপাশে খেলা স্যান্ডবক্স কাজ: https://codesandbox.io/s/export-import-example-react-jl839?foutsize=14&hidenavication=1&theme=dark