1. ホーム
  2. reactjs

[解決済み] react nativeで関数だらけのヘルパーファイルを作成する方法は?

2022-02-11 12:05:04

質問

似たような質問がありますが、複数の関数を持つファイルを作成するのに失敗しています。RNは進化が早いので、この方法がすでに古いかどうかはわかりません。 react 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');
  }
}

そして、必要なComponentにインポートしています。

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