JavaScript導出一個新的對象實例

-1

export utilities = { 
    assignOptions: function(newOption, callback) { 
     //Incorrect 'this' context on second binding 
     this.props.updateOptions((prevOptions) => Object.assign({}, prevOptions, newOption), callback); 
    } 
}; 

export const FirstComponent = (WrappedComponent) => class extends React.Component { 
    constructor(props) { 
     super(props); 

     utilities.assignOptions = utilities.assignOptions.bind(this); 
     utilities.assignOptions("test"); //'this' context is FirstComponent 
    } 
}; 

export const SecondComponent = (WrappedComponent) => class extends React.Component { 
    constructor(props) { 
     super(props); 

     utilities.assignOptions = utilities.assignOptions.bind(this); 
     utilities.assignOptions("test2"); //'this' context is still FirstComponent instead of SecondComponent 
    } 
};

它似乎是相同的實例導出，所以綁定不起作用。每次如何導出新實例？JavaScript導出一個新的對象實例

來源

2016-11-18 Martin Dawson

這是一種接近「工具」功能的奇怪方式。你可以解釋一下用例嗎？像這樣傳遞組件的上下文會使調試複雜化。爲什麼不更「純」，更具說明性？它幾乎看起來像你試圖創建一個高階組件（附加某些道具到一個組件，通常不被接受）。如果是這樣的話，我建議看一個的實現。 – ZekeDroid

@ZekeDroid這些實際上是HOC的，我編輯了代碼。這兩個組件在通過'updateOptions（）'更新父狀態時使用相同的語法，因此我不想在代碼中編寫'Object.assign' 100次，而寧願使用上面的實用程序函數共享通用代碼。 –

是的，我正試圖專注於你所看到的錯誤，而不是你正在攻擊這個用例的方式。我認爲它與如何在普通對象和ES6類中共享上下文有關。我不知道你可以像這裏使用'this'一樣使用它。爲什麼不製作適當的HOC？在中，一個組件包裝在一個組件中？ – ZekeDroid

問題可能是JS如何處理對象與ES6類中的上下文。一個簡單的方法做道具注射就像我認爲你試圖什麼是創造一個HOC撫慰你的組件：

function wrapComponent(ComponentToWrap) { 
    return class WrappedComponent extends React.Component { 
    render() { 
     return <ComponentToWrap {...this.props}/> 
    } 
    } 
}

這是一個簡單的例子，但認爲可以使用的邏輯是你」 d喜歡將任何你想要的道具注入每個WrappedComponent。

來源

2016-11-18 20:59:41 ZekeDroid

JavaScript導出一個新的對象實例

回答

相關問題