#javascript #reactjs
#javascript #reactjs
Вопрос:
Я хочу иметь некоторый повторно используемый 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;
Ответ №1:
каким был бы правильный синтаксис 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));
}
Ответ №2:
Я бы использовал только одну функцию
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);
}
});
}
Комментарии:
1. Почему не просто
success: successCallback
иerror: errorCallback
?2. Передать дополнительные параметры этим функциям… если вы хотите 🙂
3. Но это может быть легко сделано вызывающим:
saveWithTwoCallbacks(.., ..., function() { something(foo, bar); })
.4. Да, оба делают одно и то же — я думаю, это просто вопрос предпочтений.