Как создать вспомогательный файл, полный функций в реагировать на родной?

24

Хотя есть аналогичный вопрос, я не могу создать файл с несколькими функциями. Не уверен, что метод уже устарел или нет, поскольку RN развивается очень быстро. Как создать глобальную вспомогательную функцию в 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, что означает, что я импортирую правильный путь, но не другие.

Каков правильный способ сделать это, пожалуйста?

Теги:
react-native

2 ответа

38
Лучший ответ

Быстрое примечание. Вы импортируете класс, вы не можете вызывать свойства класса, если они не являются статическими свойствами. Подробнее о классах читайте здесь: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

Там есть простой способ сделать это. Если вы выполняете вспомогательные функции, вы должны сделать файл, который экспортирует такие функции:

export function HelloChandu() {

}

export function HelloTester() {

}

Затем импортируйте их так:

import { HelloChandu } from './helpers'

Поделиться
  • 0
    Хорошо, я понял. Спасибо. Нужно прочитать некоторые здесь exploringjs.com/es6/ch_modules.html
  • 1
    А как насчет экспорта объекта, который содержит множество функций? Кроме того, каковы были бы плюсы и минусы экспорта такого объекта по сравнению с экспортом класса со статическими свойствами?
Показать ещё 2 комментария
2

Я уверен, что это может помочь. Создайте файл A в любом месте каталога и экспортируйте все функции.

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 
}

Здесь, в вашем классе компонента React, вы можете просто написать один оператор импорта.

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
    Если я хочу вызвать избыточное действие в func1 с помощью this.props.action ... как мне изменить код в классе компонентов React? Я получаю undefined не является объектом (оценка '_this.props.actions')
  • 0
    Я получил то, что вы пытаетесь достичь здесь. я могу предложить передать функцию обратного вызова в func1. а внутри функции обратного вызова вы можете отправлять свои действия с помощью this.props.action. еще одна вещь, которую вы должны иметь в виду, это то, что вам придется mapDispatchToProps, я надеюсь, что вы делаете это.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню