如何在本机反应中创建充满功能的帮助文件？

Posted 2023-02-22

【中文标题】如何在本机反应中创建充满功能的帮助文件？

【英文标题】：How to create helper file full of functions in react native?

【发布时间】：2016-11-19 00:18:55

【问题描述】：

虽然有一个类似的问题，但我无法创建具有多个功能的文件。不确定该方法是否已经过时，因为 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，这意味着我正在导入正确的路径，而不是其他任何路径。

请问正确的做法是什么？

【参考方案1】：

如果你想使用类，你可以这样做。

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

【参考方案2】：

快速提示：您正在导入一个类，除非它们是静态属性，否则您不能调用类的属性。在此处阅读有关课程的更多信息：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

【讨论】：

好的，我知道了，谢谢。必须从这里阅读一些内容exploringjs.com/es6/ch_modules.html

如果导出一个包含一堆函数的对象呢？另外，导出此类对象与导出具有静态属性的类的优缺点是什么？

像我们在这里使用命名导出只是一个正在导出的对象。这就是您可以在导入时解构的原因。做import functions from './helpers'。 functions. HelloChandu 会在那里。 functions 是一个包含所有函数的对象。在这里阅读出口 :) developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

在一个类上使用一堆静态属性的缺点是你无缘无故地拥有一个类。这就像使用您不需要的 api。你为什么要new 只为静态属性创建一个类？在这种情况下导出一个函数

从文体上来说，js中的函数不都是“小写”吗？

【参考方案3】：

我更喜欢创建他的名字是 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

当您需要使用它时，应该将其导入为 use ""，因为您没有使用默认关键字外观

 import FUNCTION_NAME,findByAttr from'.whare file is store/utils/index'

【参考方案4】：

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

现在您可以单独导入 then 以使用每个功能：

import  Table, Utils  from 'helpers';

const columns = Table.getColumnsFromData(data);
Table.formatCell(cell);

const myName = Utils.formatName(someNameVariable);

希望它可以帮助您更好地组织文件。

【参考方案5】：

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

【讨论】：

我知道已经有一段时间了，但有一个后续问题：有没有一种巧妙的方法可以从另一个辅助函数中调用一个辅助函数？即 helper2: function(param1) helper1(); ?我尝试了 this.helper1() 和只是 helper1() 但都没有用。

@Johan 试试helper2: function(param1) helpers.helper1();

如果您想直接访问单个模块/对象中的方法，则可以使用此方法。谢谢！

我喜欢这个。声明为对象并在点之后公开方法。更好地使用智能感知自动导入以加快开发速度。

【参考方案6】：

我相信这会有所帮助。在目录的任意位置创建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 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;

【讨论】：

如果我想在 func1 中使用 this.props.action 调用 redux 操作...如何更改 React 组件类中的代码？我得到 undefined is not an object（评估 '_this.props.actions'）

我得到了你想要在这里实现的目标。我可以建议将回调函数传递给 func1。在回调函数中，您可以使用 this.props.action 调度您的操作。您需要记住的另一件事是您必须映射DispatchToProps，我希望您正在这样做。

为什么是常量？函数名之前的导出关键字有什么区别吗？

@DinIslamMilon 这只是我的偏好。如果我在单独的文件/模块中有功能。我会将它们作为对象的常量或属性。我不使用直接函数或导出直接函数。我不认为使用其他方式有任何伤害