2016-07-15 3 views
34

Anche se esiste una domanda simile, non riesco a creare un file con più funzioni. Non sono sicuro che il metodo sia già obsoleto o meno, dal momento che RN si sta evolvendo molto velocemente. How to create global helper function in react native?Come creare un file di supporto pieno di funzioni in risposta nativo?

Sono nuovo di React Native.

Quello che voglio fare è creare un file js pieno di molte funzioni riutilizzabili e quindi importarlo nei componenti e chiamarlo da lì.

Quello che ho fatto finora potrebbe sembrare stupido ma so che lo chiederete così eccoli qui.

Ho cercato di creare un nome di classe Chandu ed esportarlo come questo

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

E poi importarlo in qualsiasi necessaria componente.

import Chandu from './chandu'; 

e quindi chiamare in questo modo

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

L'unica cosa che ha funzionato è stato il primo console.log, il che significa che sto importando il percorso corretto, ma non tutti gli altri.

Qual è il modo corretto di farlo per favore?

risposta

51

Nota rapida: si sta importando una classe, non è possibile chiamare proprietà su una classe a meno che non siano proprietà statiche. Maggiori informazioni sulle classi qui: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

C'è un modo semplice per farlo, però. Se si stanno facendo funzioni di aiuto, si dovrebbe invece fare un file che esporta le funzioni in questo modo:

export function HelloChandu() { 

} 

export function HelloTester() { 

} 

quindi importarli in questo modo:

import { HelloChandu } from './helpers'

+0

Ok, ho capito grazie. Devi leggerne alcuni da qui http://exploringjs.com/es6/ch_modules.html – cjmling

+0

Che dire invece di esportare un oggetto, che contiene un sacco di funzioni? Inoltre, quali sarebbero i pro e i contro dell'esportazione di un oggetto contro l'esportazione di una classe con proprietà statiche? – hippietrail

+2

L'utilizzo delle esportazioni denominate come quelle in cui ci troviamo qui è solo un oggetto da esportare. Questo è il motivo per cui puoi distruggere l'importazione. Importa le funzioni da "./Helpers". 'funzioni. HelloChandu' ci sarà. le funzioni è un oggetto che contiene tutte le funzioni. Leggi sull'esportazione qui :) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export – zackify

2

Sono sicuro che questo può aiutare. Crea fileA in qualsiasi punto della directory ed esporta tutte le funzioni.

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 
} 

Qui, nella classe del componente React, è possibile scrivere semplicemente una dichiarazione di importazione.

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; 
+0

Se voglio chiamare l'azione redux in func1 con this.props.action ... come posso cambiare il codice nella classe del componente React?Sto diventando indefinito non è un oggetto (valutando '_this.props.actions') –

+0

ho ottenuto ciò che stai cercando di ottenere qui. quello che posso suggerire è passare una funzione di callback a func1. e all'interno della funzione di callback, puoi inviare la tua azione con this.props.action. un'altra cosa che devi tenere a mente è che dovrai mappareDispatchToProps, spero che tu lo stia facendo. –

+0

perché const? fa una qualche differenza una parola chiave di esportazione prima del nome della funzione? –

Problemi correlati