Блог

Я хочу иметь некоторый повторно используемый JS-код в client.jsx файле, который импортируется в компоненты React (созданные с помощью webpack). вы можете видеть, что save() , saveWithTwoCallbacks() saveWithCallback() методы в этом client.jsx в основном скопированы. каков был бы правильный синтаксис JS для save() методов повторного использования друг друга?

файл client.jsx:

 import {browserHistory} from "react-router";

module.exports = {

    saveWithTwoCallbacks: function (urlToCall, objectToSave, successCallback, errorCallback) {
        $.ajax({
            url: urlToCall,
            contentType: 'application/json',
            type: 'POST',
            data: JSON.stringify(objectToSave),
            success: function () {
                successCallback();
            },
            error: function (xhr, status, err) {
                errorCallback(err.toString());
            }
        });
    },

    saveWithCallback: function (urlToCall, objectToSave, callback) {
        $.ajax({
            url: urlToCall,
            contentType: 'application/json',
            type: 'POST',
            data: JSON.stringify(objectToSave),
            success: function () {
                callback();
            },
            error: function (xhr, status, err) {
                console.error(xhr, status, err.toString());
            }
        });
    },

    save: function (urlToCall, objectToSave, navigateTo) {
        $.ajax({
            url: urlToCall,
            contentType: 'application/json',
            type: 'POST',
            data: JSON.stringify(objectToSave),
            success: function () {
                // console.log("saved")
                browserHistory.push(navigateTo)
            },
            error: function (xhr, status, err) {
                console.error(xhr, status, err.toString());
            }
        });
    },

}
  

LoginComponent.файл jsx:

 import React from "react";
import {saveWithTwoCallbacks} from "./client";

class LoginComponent extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        data : {
        },
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e) {
    setFormChangeToStateData(e, this)
}

handleSubmit(e) {
    e.preventDefault();
    saveWithTwoCallbacks("http://localhost:9000/login", this.state.data, onSuccess, onError);
}

render()......
}
export default LoginComponent;
  

каким был бы правильный синтаксис JS для методов save() для повторного использования друг друга?

Ничего особенного. Определения функций выполняются через function f() { ... } и вызовы функций через f() .

В вашем случае вы вводите $.ajax вызов saveWithTwoCallbacks , а затем просто вызываете нужную функцию из других.

Чтобы упростить это, используйте именованный экспорт:

 export function saveWithTwoCallbacks(urlToCall, objectToSave, successCallback, errorCallback) {
  // $.ajax ...
}

export function saveWithCallback(urlToCall, objectToSave, callback) {
  saveWithTwoCallbacks(
    urlToCall,
    objectToSave,
    callback,
    (xhr, status, err) => console.error(xhr, status, err.toString())
  );
}

export function save(urlToCall, objectToSave, navigateTo) {
  saveWithCallback(urlToCall, objectToSave, () => browserHistory.push(navigateTo));
}
  

Я бы использовал только одну функцию

 saveWithTwoCallbacks: function (urlToCall, objectToSave, successCallback, successCallbackParams, errorCallback, errorCallbackParams) {
    $.ajax({
        url: urlToCall,
        contentType: 'application/json',
        type: 'POST',
        data: JSON.stringify(objectToSave),
        success: function () {
            successCallback.apply(null, successCallbackParams);
        },
        error: function (xhr, status, err) {
            errorCallback.apply(null, errorCallbackParams);
        }
    });
}