この醜いコードをクリーンアップするにはどうすればよいですか？

Question

私は中途半端なプロジェクトを選んで、この種のコンストラクタを全部持っています。私は、this.x = this.x.bind（this）と列定義について特に話しています。

constructor(props) { 
super(props); 

const routerstate = props.router.location.state || {}; 
const { query } = props.router.location; 
const tabs = this.defineTabs(); 
this.state = { 
    tabs: tabs, 
    activeTab: routerstate.activeTab ? tabs.get(routerstate.activeTab) : tabs.get(1), 
    complaints: null, 
    selectedComplaint: null, 
    nrselected: 0, 
    showSearch: false, 
    sortModel: { colId: query.sortBy || 'createdDate', sort: query.sortDirection || "desc" } 
}; 

this.changeTab = this.changeTab.bind(this); 
this.showComplaintDetail = this.showComplaintDetail.bind(this); 
this.onSelectionChanged = this.onSelectionChanged.bind(this); 
this.onCellClicked = this.onCellClicked.bind(this); 
this.search = this.search.bind(this); 
this.sellerDetailsAction = this.sellerDetailsAction.bind(this); 
this.retrieveComplaints = this.retrieveComplaints.bind(this); 
this.closeOverlay = this.closeOverlay.bind(this); 
this.closeSearchBar = this.closeSearchBar.bind(this); 
this.retrieveStateActions = this.retrieveStateActions.bind(this); 
this.takeAction = this.takeAction.bind(this); 
this.filterSubBrand = this.filterSubBrand.bind(this); 

// Defining table columns - apparently this is the only option for now 
this.columns = [ 
    { headerName: '', headerCellTemplate:CheckboxHeaderCell(() => this.api.selectAll(),() => this.api.deselectAll()), width: 50, checkboxSelection: true, suppressSorting: true, suppressResize: true, suppressMovable: true, onCellClicked: this.onCellClicked }, 
    { colId: 'url', headerName: 'Url', field: 'url', cellRendererFramework: LinkCell, onClick: this.showComplaintDetail, width: 250, sort: query && query.sortBy === "url" ? "asc" : "" }, 
    { colId: 'enforcementStatus', headerName: 'Enforcement Status', valueGetter: (params) => { return displayMapper.enforcement(params.data.enforcementStatus); } }, 
    { colId: 'createdDate', headerName: 'Date Created', valueGetter: (params) => { return moment(params.data.createdDate).format('YYYY-MM-DD HH:mm:ss'); }, sort: !query || (query && query.sortBy !== "url") ? "desc" : ""}, 
    { colId: 'submemberKey', headerName: 'Sub-Brand', valueGetter: (params) => { return displayMapper.subBrand(params.data.owner.subMemberKey); }, width: 150 }, 
    { colId: 'externalBatchId', headerName: 'IBID', valueGetter: (params) => { return params.data.complaintBatch ? params.data.complaintBatch.internalID : null; } }, 
    { colId: 'complaintIPR', headerName: 'IPR', valueGetter:(params) => { return displayMapper.ipr(params.data.ipr.iprType.code); } }, 
    { colId: 'platformCode', headerName: 'Platform', valueGetter:(params) => { return params.data.platform.name; } }, 
    { colId: 'complaintType', headerName: 'Complaint Type', valueGetter:(params) => { return displayMapper.complaint(params.data.complaintType.code); } }, 
    { headerName: 'SID', valueGetter: (params) => { return params.data.submissionBatch.internalID; } } 
]; 
if (isAllowed('complaints.field.process')) this.columns.splice(7, 0, { colId: 'processStatus', headerName: 'Process Status', valueGetter: (params) => { return displayMapper.process(params.data.processStatus); } }); 
if (isAllowed('complaints.field.brand')) this.columns.splice(1, 0, { colId: 'memberKey', headerName: 'Brand', valueGetter: (params) => { return displayMapper.brand(params.data.owner.memberKey); }, width: 150 });}; 

このコードを形にするにはどうすればよいですか？

Answer 1

機能をバインドする方法はいくつかあります。 ES6の匿名関数を使用すると、これをリファクタリングするのに最も便利な方法です。これは、あなたがextends構文を使用していることを前提としています。

基本的に、コンストラクタ内のすべてのバインディングをザップして、関数を書き直すことができます。私はこれがイベントハンドラでバインドするよりも簡単だと思いますか？あなたがそのようにいくつか見逃しやすいかもしれないようです。

class MyComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    handleClick =() => { 
    console.log(this); // the React Component instance 
    } 
    render() { 
    return (
     <div onClick={this.handleClick}></div> 
    ); 
    } 
}