Làm thế nào để tạo tập tin trợ giúp đầy đủ các chức năng trong phản ứng gốc?

Mặc dù có một câu hỏi tương tự nhưng tôi không thể tạo một tệp có nhiều chức năng. Không chắc phương thức đã lỗi thời hay chưa vì RN đang phát triển rất nhanh. Làm thế nào để tạo chức năng trợ giúp toàn cầu trong phản ứng bản địa?

Tôi chưa quen với React Native.

Những gì tôi muốn làm là tạo một tệp js có nhiều chức năng có thể sử dụng lại và sau đó nhập nó trong các thành phần và gọi nó từ đó.

Những gì tôi đã làm cho đến nay có thể trông ngu ngốc nhưng tôi biết bạn sẽ yêu cầu nó vì vậy họ ở đây.

Tôi đã thử tạo một tên lớp Chandu và xuất nó như thế này

'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');
  }
}

Và sau đó tôi nhập nó trong bất kỳ Thành phần cần thiết.

import Chandu from './chandu';

Và sau đó gọi nó như thế này

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

Điều duy nhất hoạt động là console.log đầu tiên, có nghĩa là tôi đang nhập đúng đường dẫn, nhưng không phải bất kỳ đường dẫn nào khác.

Cách chính xác để làm điều này xin vui lòng là gì?

Lưu ý nhanh: Bạn đang nhập một lớp, bạn không thể gọi các thuộc tính trên một lớp trừ khi chúng là thuộc tính tĩnh. Đọc thêm về các lớp học tại đây: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Class

Có một cách dễ dàng để làm điều này, mặc dù. Nếu bạn đang tạo các hàm trợ giúp, thay vào đó, bạn nên tạo một tệp xuất các hàm như thế này:

export function HelloChandu() {

}

export function HelloTester() {

}

Sau đó nhập chúng như vậy:

import { HelloChandu } from './helpers'

hoặc là...

import functions from './helpers' sau đó functions.HelloChandu

Một cách khác là tạo một tệp trợ giúp trong đó bạn có một đối tượng const với các hàm là các thuộc tính của đối tượng. Bằng cách này, bạn chỉ xuất và nhập một đối tượng.

helpers.js

const helpers = {
    helper1: function(){

    },
    helper2: function(param1){

    },
    helper3: function(param1, param2){

    }
}

export default helpers;

Sau đó, nhập như thế này:

import helpers from './helpers';

và sử dụng như thế này:

helpers.helper1();
helpers.helper2('value1');
helpers.helper3('value1', 'value2');

Tôi chắc chắn điều này có thể giúp đỡ. Tạo tập tinA bất cứ nơi nào trong thư mục và xuất tất cả các chức năng.

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 
}

Ở đây, trong lớp thành phần React của bạn, bạn chỉ cần viết một câu lệnh nhập.

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;

Để đạt được những gì bạn muốn và có một tổ chức tốt hơn thông qua các tệp của mình, bạn có thể tạo một tệp index.js để xuất các tệp trợ giúp của mình.

Giả sử bạn có một thư mục được gọi là / người trợ giúp . Trong thư mục này, bạn có thể tạo các chức năng của mình chia cho nội dung, hành động hoặc bất cứ điều gì bạn thích.

Thí dụ:

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

Hãy tạo một tệp khác có chức năng giúp bạn với các bảng:

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

Bây giờ mẹo là để có một index.js trong thư mục người trợ giúp :

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

Bây giờ bạn có thể nhập sau đó riêng biệt để sử dụng từng chức năng:

import { Table, Utils } from 'helpers';

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

const myName = Utils.formatName(someNameVariable);

Hy vọng nó có thể giúp tổ chức các tập tin của bạn một cách tốt hơn.

Tôi thích tạo thư mục tên anh ấy là Utils và bên trong tạo chỉ mục trang có chứa những gì mà bạn nghĩ là người trợ giúp

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}

Khi bạn cần sử dụng, nó nên được nhập dưới dạng "{}" vì bạn không sử dụng giao diện từ khóa mặc định

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

Nếu bạn muốn sử dụng lớp, bạn có thể làm điều này.

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