ステートフルなReactコンポーネントをステートレス機能コンポーネントに変換する：「componentDidMount」の機能を実装する方法は？

Question

ステートフルなReactコンポーネントを作成しました。このコンポーネントがロードされると、componentDidMountメソッドで、私は剣道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> 
); 
} 

、私はdiv要素のonLoadイベントハンドラで機能のcomponentDidMount種類を実装することができると思ったが、私はそれをやってみたら、私はイベントがで焼成されていないことに気づきましたすべて（私はドキュメントを読んで、私が実際にこのイベントを使うことができないことを知りました:)）。

だから私の質問は以下のとおりです。

• ステートレス機能コンポーネントで機能性のcomponentDidMount種類を実装する方法はありますか？基本的に私が行う必要があるのは、コンポーネントがDOMにロードされたときにコンポーネントで何かをすることです。
• 私がしようとしているのは、ステートレス機能コンポーネントの場合に有効なシナリオですか、それとも標準コンポーネントのみを使用すべきですか？

Answer 1

機能的なステートレスコンポーネントにはライフサイクルメソッドがありません。この場合、標準コンポーネントを使用する必要があります。

---

のdocumentationリアクト：

これらのコンポーネントは、内部状態を保持していなければなりませんバッキングインスタンスを持っていない、とコンポーネントのライフサイクルメソッドを持っていません。

Answer 2

ステートフルなコンポーネントコンテナを作成し、ステートレスであるサブコンポーネントにprops/argsを渡すことも検討してください。