将有状态的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传递给无状态的子组件。