将状态响应组件转换为无状态功能组件：如何实现“componentDidMount”一些功能？ [英] Converting stateful React component to stateless functional component: How to implement "componentDidMount" kind of functionality?

问题描述

我写了一个小状态的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！==''）？真假; 
 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-PopuponKeyDown = {this.handleWindowKeyDown}> 
< div className =ce-window-body> 
 {errorInformation.message} 
< code> 
< textarea readOnly = {true} className = {exceptionMessageCss} rows =3defaultValue = {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： 
 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！==''）？真假; 
 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（'来自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： 
 modal：true，
 title：modalWindowTitle，
 resizable：false 
}）; 
 resizeComponent（）; 
} 
 
 return（
< div id =Error-Dialog-PopuponLoad = {handleComponentOnLoad} onKeyDown = {handleWindowKeyDown}> 
< div className =ce-window-body> 
 {errorInformation.message} 
< code> 
< textarea readOnly = {true} className = {exceptionMessageCss} rows =3 defaultValue = {baseExceptionMessage} /> 
< / code> 
< / div> 
< / div> 
）; 
} 
  

起初我以为我可以实现 componentDidMount 在 onLoad 事件处理程序中的功能类型，但是当我尝试这样做时，我注意到事件没有被触发（我然后读取文件，发现我真的不能使用这个事件：））。

所以我的问题是：

• 有无法实现无状态功能组件中的 componentDidMount 功能？实质上，我需要做的是在DOM中加载组件时执行某些操作。


• 我想要做的是在无状态功能组件或应用程序的情况下的有效方案我只是坚持标准组件？

解决方案

功能无状态组件没有生命周期方法。在这种情况下，您应该遵守标准组件。

---

从React的文档：

这些组件不能保留内部状态，没有备份实例，也没有组件生命周期方法。

I have written a small stateful React component. When this component loads, in componentDidMount method I am making use of Kendo UI to show the content of the component in a popup window.

Here's my code:

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

Given that this component doesn't need to maintain any state, I am trying to convert this component into a stateless functional component.

The place where I am struggling is how to implement componentDidMount functionality? Here's the code I have written so far:

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

At first, I thought I could implement componentDidMount kind of functionality in onLoad event handler of the div but when I tried doing it I noticed that the event is not fired at all (I then read the documentation and found out that I can't really use this event :)).

So my questions are:

• Is there a way to implement componentDidMount kind of functionality in stateless functional components? Essentially what I need to do is do something with the component when it is loaded in DOM.
• Is what I am trying to do is a valid scenario in case of a stateless functional component or should I just stick with standard component?

解决方案

Functional stateless components do not have lifecycle methods. You should stick with standard component in this case.

---

From React's documentation:

These components must not retain internal state, do not have backing instances, and do not have the component lifecycle methods.

这篇关于将状态响应组件转换为无状态功能组件：如何实现“componentDidMount”一些功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！