নেটিভ প্রতিক্রিয়া নেভিগেশন সম্পূর্ণ ফাংশন সহ সহায়ক ফাইল কিভাবে তৈরি করবেন?

Question

একই ধরণের প্রশ্ন থাকলেও আমি একাধিক ফাংশন সহ একটি ফাইল তৈরি করতে ব্যর্থ হচ্ছি। নিশ্চিত না যে পদ্ধতিটি ইতিমধ্যে পুরানো হয়েছে বা না হিসাবে আরএন খুব দ্রুত বিকশিত হচ্ছে। দেশীয় প্রতিক্রিয়াতে কীভাবে বিশ্বব্যাপী সহায়ক ফাংশন তৈরি করবেন?

আমি রিয়েট নেটিভ নতুন

আমি যা করতে চাই তা হ'ল অনেকগুলি পুনরায় ব্যবহারযোগ্য ফাংশনে পূর্ণ একটি জেএস ফাইল তৈরি করা এবং তারপরে এটি উপাদানগুলিতে আমদানি করা এবং সেখান থেকে কল করা।

আমি এখন পর্যন্ত যা করছি তা বোকা লাগতে পারে তবে আমি জানি আপনি এটি চাইবেন তাই তারা এখানে।

আমি চান্দু নামের একটি বর্গ তৈরি করার চেষ্টা করেছি এবং এটি এর মতো রফতানি করি

'use strict';
import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  TextInput,
  View
} from 'react-native';


export default class Chandu extends Component {

  constructor(props){
    super(props);
    this.papoy = {
      a : 'aaa'
    },
    this.helloBandu = function(){
      console.log('Hello Bandu');
    },
  }

  helloChandu(){
    console.log('Hello Chandu');
  }
}

এবং তারপরে আমি এটি কোনও প্রয়োজনীয় অংশে আমদানি করি।

import Chandu from './chandu';

এবং তারপরে এটি কল করুন

console.log(Chandu);
console.log(Chandu.helloChandu);
console.log(Chandu.helloBandu);
console.log(Chandu.papoy);

কেবলমাত্র কাজটি হয়েছিল প্রথম কনসোল.লগ, যার অর্থ আমি সঠিক পথটি আমদানি করছি, তবে অন্য কোনও নয়।

দয়া করে এটি করার সঠিক উপায় কী?

Answer 1

তাত্ক্ষণিক দ্রষ্টব্য: আপনি একটি শ্রেণি আমদানি করছেন, স্থির বৈশিষ্ট্য না থাকলে আপনি কোনও শ্রেণিতে সম্পত্তি কল করতে পারবেন না। ক্লাস সম্পর্কে এখানে আরও পড়ুন: https://developer.mozilla.org/en-US/docs/Web/ জাভা স্ক্রিপ্ট / রেফারেন্স / ক্লাস

যদিও এটি করার একটি সহজ উপায় আছে। যদি আপনি সহায়ক ফাংশন তৈরি করে থাকেন তবে আপনার পরিবর্তে এমন একটি ফাইল তৈরি করা উচিত যা এই জাতীয় ফাংশন রফতানি করে:

export function HelloChandu() {

}

export function HelloTester() {

}

তারপরে সেগুলি এ জাতীয়ভাবে আমদানি করুন:

import { HelloChandu } from './helpers'

বা ...

import functions from './helpers' তারপর functions.HelloChandu

Comments

ওকে আমি পেয়েছি ধন্যবাদ। এখান থেকে এক্সপ্লোরিং

— js.com/es6/ch_modules.html

পরিবর্তে কোনও জিনিস রফতানি সম্পর্কে কী, এতে একগুচ্ছ কার্যাদি রয়েছে? এছাড়াও স্থিতিশীল বৈশিষ্ট্য সহ একটি শ্রেণি রফতানি বনাম এই জাতীয় কোনও পণ্য রপ্তানি করার পক্ষে কি কি হবে?

— হিপ্পিট্রেইল

আমরা যেমন এখানে আছি নামযুক্ত রফতানি ব্যবহার করা কেবল একটি পণ্য রফতানি করা। এই কারণেই আপনি আমদানিতে গতিবিধ্বন করতে পারেন। কি import functions from './helpers'। functions. HelloChanduআমি সেখানে থাকব. ফাংশন সমস্ত ফাংশন সমন্বিত একটি বস্তু। রফতানি এখানে পড়ুন :) :) বিকাশকারী.মোজিলা.আর.ইন

— ইউএস

কোনও শ্রেণিতে স্থির বৈশিষ্ট্যগুলির গুচ্ছ ব্যবহার করার শঙ্কটি হ'ল আপনার অকারণে ক্লাস রয়েছে। এটি এমন একটি এপিআই ব্যবহার করার মতো যা আপনার দরকার নেই। আপনি কেন newস্থির বৈশিষ্ট্যের জন্য একটি শ্রেণি আপ করবেন ?

— সেক্ষেত্রে

স্টাইলিস্টিকভাবে বলতে গেলে, জেএসগুলিতে সাধারণত "লোয়ার উট কেস" থাকে না?

— জে উডচাক

Answer 2

একটি বিকল্প হ'ল একটি হেল্পার ফাইল তৈরি করা যেখানে আপনার অবজেক্টের বৈশিষ্ট্য হিসাবে ফাংশন সহ একটি স্থির অবজেক্ট থাকে। এইভাবে আপনি কেবল একটি বস্তু রফতানি এবং আমদানি করুন।

helpers.js

const helpers = {
    helper1: function(){

    },
    helper2: function(param1){

    },
    helper3: function(param1, param2){

    }
}

export default helpers;

তারপরে, এর মতো আমদানি করুন:

import helpers from './helpers';

এবং এটির মতো ব্যবহার করুন:

helpers.helper1();
helpers.helper2('value1');
helpers.helper3('value1', 'value2');

Comments

আমি জানি এটি একটি সময় হয়ে গেছে তবে একটি অনুসরণের প্রশ্ন: অন্য সহায়ক সহায়ক ফাংশন থেকে কোনও সহায়ক সহায়ককে কল করার জন্য কি খুব সুন্দর উপায় আছে? আই হেল্পার 2: ফাংশন (প্যারাম 1) {হেল্পার 1 (); ? আমি এটি.হেল্পার 1 () এবং সবেমাত্র সাহায্যকারী 1 () দিয়ে চেষ্টা করেছি কিন্তু কোনওটিই কাজ করে নি।

— জোহান

@ জোহান চেষ্টা করুনhelper2: function(param1){ helpers.helper1(); }

— সি-শ্যাভেজ

আপনি যদি একক একক মডিউল / অবজেক্ট থেকে সরাসরি পদ্ধতি অ্যাক্সেস করতে চান তবে আপনি এই পদ্ধতিটি ব্যবহার করবেন। ধন্যবাদ!

— ব্রেট 84c

Answer 3

আমি নিশ্চিত যে এটি সাহায্য করতে পারে। ডিরেক্টরিতে যে কোনও জায়গায় ফাইলএ তৈরি করুন এবং সমস্ত ফাংশন রফতানি করুন।

export const func1=()=>{
    // do stuff
}
export const func2=()=>{
    // do stuff 
}
export const func3=()=>{
    // do stuff 
}
export const func4=()=>{
    // do stuff 
}
export const func5=()=>{
    // do stuff 
}

এখানে, আপনার প্রতিক্রিয়া উপাদান শ্রেণিতে আপনি কেবল একটি আমদানির বিবৃতি লিখতে পারেন।

import React from 'react';
import {func1,func2,func3} from 'path_to_fileA';

class HtmlComponents extends React.Component {
    constructor(props){
        super(props);
        this.rippleClickFunction=this.rippleClickFunction.bind(this);
    }
    rippleClickFunction(){
        //do stuff. 
        // foo==bar
        func1(data);
        func2(data)
    }
   render() {
      return (
         <article>
             <h1>React Components</h1>
             <RippleButton onClick={this.rippleClickFunction}/>
         </article>
      );
   }
}

export default HtmlComponents;

Comments

যদি আমি এই.পড়গুলি.অ্যাকশন দিয়ে ফানক 1 এ রডুএক্স অ্যাকশন কল করতে চাই ... আমি কীভাবে প্রতিক্রিয়া শ্রেণীর কোডটিতে কোড পরিবর্তন করব? আমি অপরিজ্ঞাত হয়ে উঠছি কোনও অবজেক্ট নয় ('_this.prop.ferences' মূল্যায়ন করা)

— জাস্টিন লোক

আপনি যা অর্জন করতে চাইছেন তা আমি পেয়েছি। আমি যা প্রস্তাব করতে পারি তা হ'ল ফ্যানক 1 এ একটি কলব্যাক ফাংশন পাস। এবং কলব্যাক ফাংশনের অভ্যন্তরে, আপনি এই.পাশ.অ্যাকশন সহ আপনার ক্রিয়া প্রেরণ করতে পারেন। আরও একটি বিষয় যা আপনার মনে রাখা দরকার তা হ'ল আপনাকে ডিসপ্যাচটোপ্রপস মানচিত্র করতে হবে, আমি আশা করি আপনি এটি করছেন।

— হান্নাদ রেহমান

কেন কনস্ট? এটি কোনও ফাংশন নামের আগে একটি রফতানি কীওয়ার্ড তৈরি করে?

— মিলন

@ ডিনস্লাসমিলন এটিই আমার পছন্দ। আমার যদি পৃথক ফাইল / মডিউলটিতে ফাংশন থাকে। আমি এগুলিকে কনস্ট বা বস্তুর বৈশিষ্ট্য হিসাবে তৈরি করব। আমি সরাসরি ফাংশন বা সরাসরি ফাংশন রফতানি করতে চাই না। আমি অন্যথায় ব্যবহার করে কোনও ক্ষতি দেখতে পাচ্ছি না

— হান্নাদ রেহমান

Answer 4

আপনি যা চান তা অর্জন করতে এবং আপনার ফাইলগুলির মাধ্যমে একটি আরও ভাল সংস্থা তৈরি করতে, আপনি আপনার সহায়ক ফাইলগুলি রফতানি করতে একটি index.js তৈরি করতে পারেন।

ধরা যাক আপনার কাছে / সহায়ক নামে একটি ফোল্ডার রয়েছে । এই ফোল্ডারের অভ্যন্তরে আপনি আপনার ফাংশন সামগ্রী, ক্রিয়া বা আপনার পছন্দসই কিছু দ্বারা বিভক্ত করতে পারেন।

উদাহরণ:

/* Utils.js */
/* This file contains functions you can use anywhere in your application */

function formatName(label) {
   // your logic
}

function formatDate(date) {
   // your logic
}

// Now you have to export each function you want
export {
   formatName,
   formatDate,
};

টেবিলগুলির সাথে আপনাকে সহায়তা করার জন্য ফাংশন রয়েছে এমন একটি ফাইল তৈরি করুন:

/* Table.js */
/* Table file contains functions to help you when working with tables */

function getColumnsFromData(data) {
   // your logic
}

function formatCell(data) {
   // your logic
}

// Export each function
export {
   getColumnsFromData,
   formatCell,
};

এখন কৌশলটি হেল্পার্স ফোল্ডারের ভিতরে একটি index.js থাকা :

/* Index.js */
/* Inside this file you will import your other helper files */

// Import each file using the * notation
// This will import automatically every function exported by these files
import * as Utils from './Utils.js';
import * as Table from './Table.js';

// Export again
export {
   Utils,
   Table,
};

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

import { Table, Utils } from 'helpers';

const columns = Table.getColumnsFromData(data);
Table.formatCell(cell);

const myName = Utils.formatName(someNameVariable);

আশা করি এটি আরও ভালভাবে আপনার ফাইলগুলি সংগঠিত করতে সহায়তা করতে পারে।

Answer 5

আমি তার নামটি ইউটিলস এবং অভ্যন্তরীণ পৃষ্ঠার সূচক তৈরি করতে পছন্দ করি যা আপনাকে সাহায্যকারী বলে মনে করে

const findByAttr = (component,attr) => {
    const wrapper=component.find(`[data-test='${attr}']`);
    return wrapper;
}

const FUNCTION_NAME = (component,attr) => {
    const wrapper=component.find(`[data-test='${attr}']`);
    return wrapper;
}

export {findByAttr, FUNCTION_NAME}

যখন আপনি এটি ব্যবহার করতে হবে এটি "{}" হিসাবে ব্যবহার হিসাবে আমদানি করা উচিত কারণ আপনি ডিফল্ট কীওয়ার্ড চেহারাটি ব্যবহার করেন নি

 import {FUNCTION_NAME,findByAttr} from'.whare file is store/utils/index'

Answer 6

আপনি যদি ক্লাস ব্যবহার করতে চান তবে আপনি এটি করতে পারেন।

Helper.js

  function x(){}

  function y(){}

  export default class Helper{

    static x(){ x(); }

    static y(){ y(); }

  }

App.js

import Helper from 'helper.js';

/****/

Helper.x