web-dev-qa-db-ja.com

ネイティブネイティブの関数でいっぱいのヘルパーファイルを作成するにはどうすればいいですか？

同様の質問がありますが、私は複数の機能を持つファイルを作成するのに失敗しています。 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でした、それは私が正しいパスをインポートしていることを意味しますが、他のものはそうしません。

これを正しく行う方法は何ですか？

reactjsreact-native
80
cjmling

クイックノート：クラスをインポートしています。静的プロパティでない限り、クラスのプロパティを呼び出すことはできません。クラスの詳細については、こちらを参照してください。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

しかし、これを行う簡単な方法があります。あなたがヘルパー関数を作っているならば、代わりにこのような関数をエクスポートするファイルを作るべきです：

export function HelloChandu() {

}

export function HelloTester() {

}

それからそれらをインポートします。

import { HelloChandu } from './helpers'

129
zackify

別の方法は、オブジェクトのプロパティとして関数を持つconstオブジェクトがあるヘルパーファイルを作成することです。これにより、1つのオブジェクトだけをエクスポートおよびインポートできます。

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');
46
c-chavez

私はこれが役立つと確信しています。ディレクトリ内の任意の場所に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;
18
hannad rehman

あなたが望むものを達成し、あなたのファイルを通してより良い組織を持つために、あなたはあなたのヘルパーファイルをエクスポートするために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);

あなたのファイルをより良い方法で整理するのに役立つことを願っています。

6
Italo Borges

私は彼の名前が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}

これを使用する必要がある場合、デフォルトのキーワードlookを使用しなかったため、use "{}"としてインポートする必要があります。

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