重構mixin到包裝組件

我有一個mixin，它將一些輔助功能增強應用於我的React組件。目前，它只是試圖以智能聚焦元素的頁面，提示到屏幕閱讀器的用戶一個新的頁面加載上：重構mixin到包裝組件

import React from "react" 

const componentDidMount =() => { 
    const autofocus = document.querySelector("main [autofocus]") 
    const fakeAutofocus = document.querySelector("main #autofocus") 
    const h1 = document.querySelector("main h1") 
    if(autofocus) 
    autofocus.focus() 
    else if(fakeAutofocus) { 
    origTabindex = fakeAutofocus.tabIndex 
    if(!origTabindex || origTabindex == -1) 
     fakeAutofocus.tabIndex = 0 
    fakeAutofocus.focus() 
    if(!origTabindex) 
     fakeAutofocus.tabIndex = -1 
    else 
     fakeAutofocus.tabIndex = origTabindex 
    } else if(h1) { 
    h1.tabIndex = 0 
    h1.focus() 
    h1.tabIndex = -1 
    } 
} 

export default { 
    componentDidMount 
}

混合到這一點我頂層組件已經很好地工作。

現在我試圖擺脫混入的，並切換到包裝部件：

export const Accessible = (component) => { 
    return class extends React.Component { 
    componentDidMount() { 
     componentDidMount() 
    } 
    render() { 
     return component() 
    } 
    } 
}

除了我似乎無法得到渲染功能權限。

如果我返回<component/>，則不呈現。如果我返回component（），我有時會得到一個控制檯錯誤，我直接調用一個React組件，但不應該這樣做。我也很確定這不會正確處理屬性。

我有一個儀表盤無狀態組件，看起來像這樣：

const Dashboard =() => <Grid fluid={true}> 
    <Row> 
    <Col md={12}> 
     <h1>Dashboard</h1> 
    </Col> 
    </Row> 
    <Row> 
    <Col md={6}> 
     <LeftPanel/> 
    </Col> 
    <Col md={6}> 
     <RightPanel/> 
    </Col> 
    </Row> 
</Grid>

然後我做的：

export Accessible(Dashboard)

，使其訪問。如果我的可訪問組件返回<dashboard/>，則它不會呈現。如果它調用該函數，則一切正常，但在以Accessible訪問時組件類會失敗。必須有一個更強大的方法來做到這一點，我錯過了。

謝謝。

來源

2016-02-12 Nolan

您不應該返回component()，因爲組件是反應組件而不是函數。

應該return <component />

來源

2016-05-23 01:16:49

重構mixin到包裝組件

回答

相關問題