[解決済み] react nativeで関数だらけのヘルパーファイルを作成する方法は?
質問
似たような質問がありますが、複数の関数を持つファイルを作成するのに失敗しています。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
関連
-
[解決済み] バベルエラーです。JSX値は、式または引用されたJSXテキストのいずれかである必要があります。
-
[解決済み] React - _this2.SetStateは関数ではありません。
-
[解決済み] ReactJS - SCRIPT1010: 期待される識別子 - IE11 で本番ビルドが実行されない
-
[解決済み] プロップ `history` は `Router` で必須とマークされているが、その値は `undefined` である。
-
[解決済み] react-navigation v5を使ったreact-nativeアプリのAppNavigatorの構文を更新する。
-
[解決済み] Cross-envでyarnの実行時にenv変数が変更されない。
-
[解決済み] React NativeとReactの違いは何ですか?
-
[解決済み] React / React Nativeでコンストラクタを使用する場合とgetInitialStateを使用する場合の違いとは何ですか?
-
[解決済み] react-nativeでキーボードを隠す
-
[解決済み] react nativeでコンポーネントを隠す/表示する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Reactコンポーネント内でswitchステートメントを使用するには?
-
[解決済み】ngrokがReact devサーバーに接続しようとすると、無効なホストヘッダが表示される。
-
[解決済み] テスト
-
[解決済み] react - createMuiThemeとcreateThemeの違い。
-
[解決済み] TypeError: reactjs の未定義のプロパティ 'status' を読み取ることができません。
-
[解決済み] 'Proptypes'が定義されていない
-
[解決済み] componentWillReceiveProps は名称が変更されました。
-
[解決済み] sh: react-scripts: npm start の実行後にコマンドが見つからない。
-
[解決済み] プロップ `history` は `Router` で必須とマークされているが、その値は `undefined` である。
-
[解決済み] Error: yarn start - エラー コマンド "start" が見つかりません。