將有狀態的React組件轉換爲無狀態的功能組件：如何實現「componentDidMount」類的功能？

Question

我寫了一個小型有狀態的React組件。當這個組件加載時，我在componentDidMount方法中使用Kendo UI在彈出窗口中顯示組件的內容。

這裏是我的代碼：

export class ErrorDialog extends React.Component { 
    constructor(props, context) { 
    super(props, context); 
    this.errorPopupWindow = null; 
    window.addEventListener('resize', this.resizeComponent); 
    this.handleWindowKeyDown = this.handleWindowKeyDown.bind(this); 
    this.handleButtonCloseWindowOnClick = this.handleButtonCloseWindowOnClick.bind(this); 
    this.handleButtonShowDetailsOnClick = this.handleButtonShowDetailsOnClick.bind(this); 
    $('#ErrorInformationForm-CloseWindow').focus(); 
    } 

    render() { 
    const errorInformation = this.props.errorInformation; 
    const baseException = errorInformation.baseException; 
    const showExceptionMessage = (typeof baseException !== 'undefined' && typeof baseException === 'object' && baseException !== null 
      && typeof baseException.message !== 'undefined' && typeof baseException.message === 'string' && baseException.message !== null 
      && baseException.message !== '') ? true : false; 
    const baseExceptionMessage = showExceptionMessage ? baseException.message : ''; 
    const exceptionMessageCss = showExceptionMessage ? 'k-textbox ce-width-100-pct ce-margin-top-5' : 'ce-invisible'; 
    return(
     <div id="Error-Dialog-Popup" onKeyDown={this.handleWindowKeyDown}> 
     <div className="ce-window-body"> 
      {errorInformation.message} 
      <code> 
      <textarea readOnly={true} className={exceptionMessageCss} rows="3" defaultValue={baseExceptionMessage} /> 
      </code> 
     </div> 
     </div> 
    ); 
    } 

    componentDidMount() { 
    const errorInformation = this.props.errorInformation; 
    const modalWindowTitle = '<span class="ce-width-100-pct ce-app-color-red"><i class="fa ce-fs-1-2-5x fa-times-circle"></i> ' + errorInformation.heading + '</span>'; 
    $('#Error-Dialog-Popup').kendoWindow({ 
     actions: [], 
     width: 500, 
     height: 130, 
     visible: true, 
     modal: true, 
     title: modalWindowTitle, 
     resizable: false 
    }); 
    this.resizeComponent(); 
    } 

    resizeComponent() { 
    } 

    closeWindowIfPossible(evt) { 
    } 

    handleWindowKeyDown(evt) { 
    } 

    handleButtonShowDetailsOnClick(evt) { 
    } 

    handleButtonCloseWindowOnClick(evt) { 
    } 
} 

鑑於此組件不需要維護任何狀態，我想這個組件轉換成一個無狀態的功能組件。

我掙扎的地方是如何實現componentDidMount功能？下面是到目前爲止，我寫的代碼：

export const ErrorDialog = (props, context) => { 
    const errorInformation = props.errorInformation; 
    const baseException = errorInformation.baseException; 
    const showExceptionMessage = (typeof baseException !== 'undefined' && typeof baseException === 'object' && baseException !== null 
     && typeof baseException.message !== 'undefined' && typeof baseException.message === 'string' && baseException.message !== null 
     && baseException.message !== '') ? true : false; 
    const baseExceptionMessage = showExceptionMessage ? baseException.message : ''; 
    const exceptionMessageCss = showExceptionMessage ? 'k-textbox ce-width-100-pct ce-margin-top-5' : 'ce-invisible'; 

    const resizeComponent =() => { 
    } 

    const closeWindowIfPossible = (evt) => { 
    } 

    const handleWindowKeyDown = (evt) => { 
    } 

    const handleButtonShowDetailsOnClick = (evt) => { 
    } 

    const handleButtonCloseWindowOnClick = (evt) => { 
    } 

    const handleComponentOnLoad = (evt) => { 
    console.log('comes in onLoad'); 
    const errorInformation = props.errorInformation; 
    const modalWindowTitle = '<span class="ce-width-100-pct ce-app-color-red"><i class="fa ce-fs-1-2-5x fa-times-circle"></i> ' + errorInformation.heading + '</span>'; 
    $('#Error-Dialog-Popup').kendoWindow({ 
     actions: [], 
     width: 500, 
     height: 130, 
     visible: true, 
     modal: true, 
     title: modalWindowTitle, 
     resizable: false 
    }); 
    resizeComponent(); 
    } 

    return(
    <div id="Error-Dialog-Popup" onLoad={handleComponentOnLoad} onKeyDown={handleWindowKeyDown}> 
     <div className="ce-window-body"> 
     {errorInformation.message} 
     <code> 
      <textarea readOnly={true} className={exceptionMessageCss} rows="3" defaultValue={baseExceptionMessage} /> 
     </code> 
     </div> 
    </div> 
); 
} 

起初，我以爲我可以實現componentDidMount種功能在div的onLoad事件處理程序，但是當我試圖做我注意到，該事件不解僱所有（我然後閱讀文檔，發現我不能真正使用這個事件:)）。

所以我的問題是：

• 是否有實現componentDidMount種功能在無狀態的功能組件的方法嗎？基本上我需要做的是在組件中加載DOM時對組件做些什麼。
• 我試圖做的是無狀態功能組件的情況下有效的方案，還是應該堅持使用標準組件？

Answer 1

功能性無狀態組件沒有生命週期方法。在這種情況下，您應該堅持使用標準組件。

---

從陣營的documentation：

這些組件必須不能保留內部狀態，沒有後盾的情況下，不具備組件的生命週期方法。

Answer 2

他們說的（上面），但也考慮製作一個有狀態的組件容器，並將props/args傳遞給無狀態的子組件。