如何在反应原生中创建充满功能的辅助文件？-Java 学习之路

虽然有类似的问题，但我无法创建具有多个功能的文件 . 由于RN的发展非常快，因此不确定该方法是否已经过时 . How to create global helper function in 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');
  }
}

然后我在任何所需的组件中导入它 .

import Chandu from './chandu';

然后像这样称呼它

console.log(Chandu);
console.log(Chandu.helloChandu);
console.log(Chandu.helloBandu);
console.log(Chandu.papoy);

唯一有效的是第一个console.log，这意味着我正在导入正确的路径，但不会导入任何其他路径 .

请问这是怎么回事？

4 回答

25
快速注意：您正在导入类，除非它们是静态属性，否则不能在类上调用属性 . 在这里阅读更多关于课程的信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

不过，有一种简单的方法可以做到这一点 . 如果要创建辅助函数，则应该创建一个导出如下函数的文件：
```
export function HelloChandu() {

}

export function HelloTester() {

}
```
然后像这样导入它们：

import { HelloChandu } from './helpers'
回复于 2024-04-27T10:26:44+08:00

要实现您想要的并通过文件更好地组织，您可以创建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);

希望它能以更好的方式帮助您整理文件 .

回复于 2024-04-27T10:26:44+08:00

另一种方法是创建一个辅助文件，其中有一个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');

回复于 2024-04-27T10:26:44+08:00

我相信这可以提供帮助 . 在目录中的任何位置创建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;

回复于 2024-04-27T10:26:44+08:00

如何在反应原生中创建充满功能的辅助文件？

4 回答

相关问题