反應：實例化組件一次並使用多次

是否可以重複使用React組件兩次，但僅實例化一次？反應：實例化組件一次並使用多次

現在我需要在ComponentDidMount上觸發超時，但我只需要在同一頁面上創建多個組件。所以我想，也許有可能實例化組件，然後將其作爲參數傳遞給它？

例如，有一個運行超時渲染完成後的組件：

export default ComponentOne extends React.Component { 
    componentDidMount =() => { 
     setTimeout(() => (this.doSomeStuff()), 10 * 1000); 
    } 

    doSomeStuff =() => { 
     // Do something, that can be done only once 
    } 
}

，表示該部件做一些東西，只能做一次。但是，在頁面上有出現取決於屏幕分辨率（CSS媒體查詢）在不同的地方，像兩個組件：

<div class="page-start block-that-appears-for-desktop"> 
    <ComponentOne /> 
</div> 
<!-- ... --> 
<div class="page-end block-that-appears-for-mobile"> 
    <ComponentOne /> 
</div>

所以現在我已經componentDidMount（）調用兩次和兩個超時，即使一個塊被隱藏。

來源

2017-03-03 pandomic

你能分享一些你的代碼嗎？我有點不確定你想要做什麼。 –

您應該將組件的超時移動到組件外部。 – paqash

如果你有對html代碼的控制，爲什麼不使用prop來判斷是否需要完成超時任務？就像''然後在'componentDidMount'中，你可以測試'this.props.doTask' ... – mguijarr

由於您只需要doSomeStuff()一次，因此將該功能提取到更高級別的組件是很有意義的，因此它只會在沒有任何其他屬性的情況下運行一次。

您可以閱讀更多關於提升層次結構的反應狀態：https://facebook.github.io/react/docs/lifting-state-up.html。

來源

2017-03-03 19:55:09

反應：實例化組件一次並使用多次

回答

相關問題