कैसे प्रतिक्रिया में देशी कार्यों से भरा सहायक फ़ाइल बनाने के लिए?

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/JavaScript/Reference/Classes

हालांकि ऐसा करने का एक आसान तरीका है। यदि आप सहायक कार्य कर रहे हैं, तो आपको इसके बजाय एक फ़ाइल बनाना चाहिए जो इस तरह से निर्यात करती है:

export function HelloChandu() {

}

export function HelloTester() {

}

फिर उन्हें ऐसे आयात करें:

import { HelloChandu } from './helpers'

या ...

import functions from './helpers' फिर functions.HelloChandu

Comments

ठीक है, मैं इसे मिल गया धन्यवाद। यहां से कुछ पढ़ने के लिए मिल गया exploringjs.com/es6/ch_modules.html

— cjmling

इसके बजाय एक वस्तु के निर्यात के बारे में क्या है, जिसमें कार्यों का एक गुच्छा होता है? इसके अलावा ऐसी वस्तु के निर्यात के पेशेवरों और विपक्षों को क्या होगा?

— हिप्पिएट्रैल

हम जैसे निर्यात नाम का उपयोग कर रहे हैं वह सिर्फ निर्यात की जाने वाली वस्तु है। यही कारण है कि आप आयात पर विनाश कर सकते हैं। करते हैं import functions from './helpers'। functions. HelloChanduवहाँ पहुँच जाएगा। फ़ंक्शंस एक ऐसा कार्य है जिसमें सभी फ़ंक्शंस शामिल हैं। निर्यात पर यहाँ पढ़ें :) developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

— zackify

एक वर्ग पर स्थिर गुणों के एक समूह का उपयोग करने का अर्थ यह है कि आपके पास बिना किसी कारण के एक वर्ग है। यह एक एपीआई का उपयोग करने जैसा है जिसकी आपको आवश्यकता नहीं है। आप newसिर्फ स्थैतिक गुणों के लिए एक वर्ग क्यों बनाएंगे? उस मामले में एक समारोह का निर्यात करें

— zackify

Stylistically बोल, js में कार्य नहीं कर रहे हैं आमतौर पर "कम ऊंट मामले"?

— जे वुडचुक

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 (); }? मैंने इसके साथ प्रयास किया ।helper1 () और सिर्फ helper1 () लेकिन दोनों ने काम नहीं किया।

— जोहान

@ जोहान कोशिशhelper2: function(param1){ helpers.helper1(); }

— c-chavez

यदि आप किसी एकल मॉड्यूल / ऑब्जेक्ट से सीधे तरीकों तक पहुंचना चाहते हैं तो यह वह विधि है जिसका आप उपयोग करेंगे। धन्यवाद!

— Brett84c

Answer 3

मुझे यकीन है कि यह मदद कर सकता है। निर्देशिका में कहीं भी fileA बनाएँ और सभी कार्यों को निर्यात करें।

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

यदि मैं इस fun.props.action के साथ func1 में redux कार्रवाई को कॉल करना चाहता हूं ... तो मैं रिएक्ट कंपोनेंट क्लास में कोड कैसे बदलूं? मैं अपरिभाषित हो रहा हूँ कोई वस्तु नहीं है ('_this.props.actions' का मूल्यांकन)

— जस्टिन लोक

मुझे वह मिला जो आप यहां हासिल करना चाह रहे हैं। मैं जो सुझाव दे सकता हूं वह func1 के लिए कॉलबैक फ़ंक्शन है। और कॉलबैक फ़ंक्शन के अंदर, आप इस कार्रवाई को भेज सकते हैं। एक और बात जो आपको ध्यान में रखने की जरूरत है, वह यह है कि आपको मैप करना होगाप्रदर्शनप्रदर्शनी, मुझे आशा है कि आप इसे कर रहे हैं।

— हन्नाद रहमान

कास्ट क्यों? क्या यह फ़ंक्शन के नाम से पहले कोई अंतर निर्यात कीवर्ड बनाता है?

— मिल्लन

@DinIslamMilon केवल मेरी प्राथमिकता है। अगर मैं अलग फ़ाइल / मॉड्यूल में कार्य करता है। मैं उन्हें वस्तुओं का एक आधार या गुण बना दूंगा। मैं प्रत्यक्ष कार्यों का उपयोग नहीं करता या प्रत्यक्ष कार्यों का निर्यात नहीं करता। मैं किसी भी नुकसान का उपयोग नहीं देख रहा

— हूं

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

मैं उस फ़ोल्डर का नाम बनाना पसंद करता हूं जिसका नाम Utils है और उसके अंदर पेज इंडेक्स बनाते हैं जिसमें वह होता है जो आपको लगता है कि आप सहायक है

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