如何创建帮助文件的函数在反应本地充分？

虽然有一个类似的问题，我未能创建一个具有多个功能的文件。不确定这个方法是否已经过时了，因为 RN 发展得很快。如何创建反应本机全局帮助函数？

我是“本土反应”的新手。

我想要做的是创建一个包含许多可重用函数的 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，这意味着我导入的是正确的路径，而不是其他任何路径。

请问做这件事的正确方法是什么？

205583 次浏览
小开
最佳答案

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

不过有个简单的办法。如果您正在创建 helper 函数，那么您应该创建一个导出如下函数的文件:

export function HelloChandu() {


}


export function HelloTester() {


}

然后像这样进口它们:

import { HelloChandu } from './helpers'

或者..。

import functions from './helpers' 那么 functions.HelloChandu

小开

我确信这会有所帮助。在目录中的任何位置创建 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;
小开

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

为了实现您想要的目标，并通过您的文件建立一个更好的组织，您可以创建一个 index.js 来导出您的 helper 文件。

假设您有一个名为 /助手的文件夹。 在这个文件夹中，您可以创建按内容、操作或任何喜欢的内容划分的函数。

例如:

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

现在的诀窍是在 帮手文件夹中有一个 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);

希望它能帮助您更好地整理文件。

小开

我更喜欢创建文件夹，他的名字是工具和内部创建页面索引，包含什么，认为你的帮助

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

 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
小开

创建一个名为 e.g Utils.js 的文件，并对所有函数使用 export。

export function firstFunction(){
}


export function secondFunction(){
}

现在有两种方法可以导入和使用这些函数

  1. 分别进口作为
import {firstFunction, secondFunction} from './Utils'

把他们当做

firstFunction()
secondFunction()
  1. 通过将通用名称指定为
import * as Utils from './Utils'

把他们当做

Utils.firstFunction()
Utils.secondFunction()

提交答案