[reactjs] 반응 네이티브에서 함수로 가득 찬 도우미 파일을 만드는 방법은 무엇입니까?

Program / 글쓴이

비슷한 질문이 있지만 여러 기능을 가진 파일을 만들지 못했습니다. 방법이 이미 구식인지 RN이 매우 빠르게 발전하고 있는지 확실하지 않습니다. 반응 네이티브에서 전역 도우미 기능을 만드는 방법은 무엇입니까?

나는 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 
}

여기서는 React 컴포넌트 클래스에서 import 문 하나만 작성하면됩니다.

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를 만들어 도우미 파일을 내보낼 수 있습니다.

/ helpers 라는 폴더가 있다고 가정 해 봅시다 . 이 폴더 내에서 기능을 컨텐츠, 조치 또는 원하는 것으로 나눌 수 있습니다.

예:

/* 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,
};

이제 속임수는 helpers 폴더 안에 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);

더 나은 방법으로 파일을 구성하는 데 도움이되기를 바랍니다.

답변

나는 그의 이름이 Utils이고 당신이 도우미라고 생각하는 것을 포함하는 create create page index 폴더를 만드는 것을 선호한다. 

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'

답변

수업을 사용하려면이 작업을 수행 할 수 있습니다.

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

답변