此处已经有代码：
export default class DeviceManagement extends Component { unbindCowDevice(){ console.log("unbindCowDevice"); let url = "/equipment/equipment/cancelBind"; let postJson = { "equipment_num" : this.clickedItem.equipment_num //TODO: chagne to unbind by cow code // "cow_code" : this.clickedItem.cow_code }; console.log(postJson); alert(JSON.stringify(postJson)); this.props.fetch( url, { method : "POST", headers : { ‘Content-Type’: ‘application/json’, ‘Accept’: ‘application/json’ }, body: JSON.stringify(postJson) }, (data) => { console.log(data); // alert(JSON.stringify(data)); let cancelBindOk = data; console.log(`Cancel bind device code ${postJson.equipment_num} result: ${cancelBindOk}`); if (cancelBindOk) { this.fetchDeviceList(); } else { console.log(`Cancel bind device code ${postJson.equipment_num} failed`); } } ); } } |
现在想要实现：
把这个函数弄成全局的helper之类的函数，供其他地方调用。
并且把代码放到更加合适的位置
而不是某个单独的Component中。
react js global helper function
components – ReactJs Global Helper Functions – Stack Overflow
Webpack CommonJS
ES6 modules compatibility with commonjs · Issue #2945 · webpack/webpack
好像就是之前见过的export function ？
然后别处即可调用？
reactjs – How to create helper file full of functions in react native? – Stack Overflow
How to create global helper function in react native? – Stack Overflow
Global jsx file for utility classes used across app – React Discuss
ReactJs Global Helper Functions – function – components – reactjs – global-methods – TechQA
Where to put helper functions in a React component?：reactjs
【总结】
最后，是把对应的函数弄到另外的一个文件中，然后别处再import对应函数：
src/lib/deviceHelper.js
export function unbindCowDevice(props, deviceCode, callback){ console.log("deviceHelper unbindCowDevice"); let url = "/equipment/equipment/cancelBind"; let postJson = { "equipment_num" : deviceCode }; console.log(postJson); // alert(JSON.stringify(postJson)); props.fetch( url, { method : "POST", headers : { ‘Content-Type’: ‘application/json’, ‘Accept’: ‘application/json’ }, body: JSON.stringify(postJson) }, (data) => { callback(data); } ); } |
别处调用：
src/container/device-management/index.js
import {unbindCowDevice} from ‘../../lib/deviceHelper.js’; export default class DeviceManagement extends Component { constructor(props) { super(props); autoBind(this); this.onConfirm = this.onConfirm.bind(this); this.unbindCallback = this.unbindCallback.bind(this); } onConfirm(){ console.log("onConfirm"); unbindCowDevice(this.props, this.clickedItem.equipment_num, this.unbindCallback); } unbindCallback(data){ console.log("unbindCallback"); console.log(data); // alert(JSON.stringify(data)); let cancelBindOk = data; console.log(`Cancel bind device code ${this.clickedItem.equipment_num} result: ${cancelBindOk}`); if (cancelBindOk) { this.fetchDeviceList(); } else { console.log(`Cancel bind device code ${this.clickedItem.equipment_num} failed`); } this.onCancel(); } } |
转载请注明：在路上 » 【已解决】ReactJS中如何实现公用的全局函数