Wie erstellt man eine Hilfsdatei voller Funktionen in der nativen Antwort?

Question

Obwohl es eine ähnliche Frage gibt, kann ich keine Datei mit mehreren Funktionen erstellen. Nicht sicher, ob die Methode bereits veraltet ist oder nicht, da RN sich sehr schnell entwickelt. How to create global helper function in react native?

Ich bin neu in Native reagieren.

Was ich tun möchte, ist eine js-Datei voller viele wiederverwendbare Funktionen zu erstellen und dann in Komponenten importieren und von dort aufrufen.

Was ich bis jetzt gemacht habe, könnte dumm aussehen, aber ich weiß, dass du darum bitten wirst, also sind sie hier.

Ich habe versucht, einen Klassennamen Chandu erstellen und exportieren Sie es wie diese

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

Und ich importieren Sie es dann in jeder Komponente erforderlich.

import Chandu from './chandu'; 

Und dann nennen es wie dieses

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

Das einzige, was war das erste console.log gearbeitet, was bedeutet, dass ich den richtigen Weg bin importieren, aber keine anderen.

Was ist der richtige Weg, dies bitte zu tun?

Answer 1

Kurzinfo: Sie importieren eine Klasse, Sie können keine Eigenschaften für eine Klasse aufrufen, es sei denn, sie sind statische Eigenschaften. Lesen Sie mehr über Klassen hier: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

Es gibt einen einfachen Weg, dies zu tun, obwohl. Wenn Sie Hilfsfunktionen machen, sollten Sie stattdessen eine Datei machen, die Funktionen wie folgt exportiert:

export function HelloChandu() { 

} 

export function HelloTester() { 

} 

Dann importieren sie etwa so:

import { HelloChandu } from './helpers'

Answer 2

Ich bin sicher, dass dies helfen kann. Erstellen Sie DateiA überall im Verzeichnis und exportieren Sie alle Funktionen.

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 
} 

Hier können Sie in Ihrer React-Komponentenklasse einfach eine Importanweisung schreiben.

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;