จะสร้างไฟล์ตัวช่วยที่เต็มไปด้วยฟังก์ชันใน react native ได้อย่างไร?

แม้ว่าจะมีคำถามคล้าย ๆ กันว่าฉันไม่สามารถสร้างไฟล์ที่มีหลายฟังก์ชันได้ ไม่แน่ใจว่าวิธีนี้ล้าสมัยไปแล้วหรือไม่เนื่องจาก RN มีการพัฒนาอย่างรวดเร็ว จะสร้างฟังก์ชัน global helper ใน react native ได้อย่างไร?

ฉันยังใหม่กับ React Native

สิ่งที่ฉันต้องการทำคือสร้างไฟล์ js ที่เต็มไปด้วยฟังก์ชันที่สามารถใช้ซ้ำได้มากมายจากนั้นนำเข้าในส่วนประกอบและเรียกใช้จากที่นั่น

สิ่งที่ฉันทำมาจนถึงตอนนี้อาจจะดูโง่ แต่ฉันรู้ว่าคุณจะถามมันดังนั้นพวกเขาจึงอยู่ที่นี่

ฉันพยายามสร้างชื่อคลาส Chandu และส่งออกเป็นแบบนี้

'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);

สิ่งเดียวที่ใช้งานได้คือ console.log แรกซึ่งหมายความว่าฉันกำลังนำเข้าเส้นทางที่ถูกต้อง แต่ไม่ใช่วิธีอื่น

วิธีที่ถูกต้องในการดำเนินการนี้คืออะไร?

หมายเหตุด่วน: คุณกำลังนำเข้าคลาสคุณไม่สามารถเรียกคุณสมบัติบนคลาสได้เว้นแต่จะเป็นคุณสมบัติคงที่ อ่านเพิ่มเติมเกี่ยวกับคลาสที่นี่: 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

อีกทางเลือกหนึ่งคือการสร้างไฟล์ตัวช่วยที่คุณมีวัตถุ const ที่มีฟังก์ชันเป็นคุณสมบัติของวัตถุ ด้วยวิธีนี้คุณจะส่งออกและนำเข้าวัตถุเพียงชิ้นเดียว

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');

ฉันมั่นใจว่านี่สามารถช่วยได้ สร้าง 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;

เพื่อให้บรรลุสิ่งที่คุณต้องการและมีองค์กรที่ดีขึ้นผ่านไฟล์ของคุณคุณสามารถสร้าง 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 ในโฟลเดอร์helpers :

/* 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);

หวังว่าจะช่วยจัดระเบียบไฟล์ของคุณให้ดีขึ้นได้

ฉันชอบสร้างโฟลเดอร์ชื่อของเขาคือ 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}

เมื่อคุณจำเป็นต้องใช้สิ่งนี้ควรนำเข้าเป็น use "{}" เนื่องจากคุณไม่ได้ใช้รูปลักษณ์ของคำหลักเริ่มต้น

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

หากคุณต้องการใช้คลาสคุณสามารถทำได้

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