Chuyển đổi thành phần React stateful thành thành phần chức năng không trạng thái: Cách triển khai loại chức năng "componentDidMount"?

Question

Tôi đã viết một thành phần React có trạng thái nhỏ. Khi thành phần này tải, trong phương thức componentDidMount, tôi đang sử dụng giao diện người dùng Kendo để hiển thị nội dung của thành phần trong cửa sổ bật lên.

Dưới đây là mã của tôi:

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) { 
    } 
} 

Cho rằng thành phần này không cần phải duy trì bất kỳ nhà nước, tôi đang cố gắng để chuyển đổi thành phần này vào một bộ phận chức năng không quốc tịch.

Nơi tôi đang gặp khó khăn là cách triển khai chức năng componentDidMount? Dưới đây là đoạn code tôi đã viết cho đến nay:

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> 
); 
} 

Lúc đầu, tôi nghĩ rằng tôi có thể thực hiện componentDidMount loại chức năng trong onLoad xử lý sự kiện của div nhưng khi tôi đã cố gắng làm việc đó tôi nhận thấy rằng sự kiện này không được bắn vào tất cả (sau đó tôi đọc tài liệu và phát hiện ra rằng tôi không thể thực sự sử dụng sự kiện này :)).

Vì vậy, câu hỏi của tôi là:

• Có cách nào để thực hiện componentDidMount loại chức năng trong thành phần chức năng không quốc tịch? Về cơ bản những gì tôi cần làm là làm một cái gì đó với các thành phần khi nó được nạp trong DOM.
• Những gì tôi đang cố gắng làm là một kịch bản hợp lệ trong trường hợp của một thành phần chức năng không quốc tịch hoặc tôi nên chỉ dính với thành phần tiêu chuẩn?

Answer 1

Các thành phần không trạng thái chức năng không có phương pháp vòng đời. Bạn nên gắn bó với thành phần tiêu chuẩn trong trường hợp này.

---

Từ Phản ứng của documentation:

Các thành phần này không phải giữ lại trạng thái nội bộ, không có trường hợp sự ủng hộ, và không có các phương pháp vòng đời phần.

Answer 2

Những gì họ đã nói (ở trên), nhưng cũng cân nhắc tạo một thùng chứa thành phần có trạng thái và chuyển đạo cụ/arg đến các thành phần phụ không quốc tịch.