6

小さなステートフルな 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 にロードされたときにコンポーネントを操作することです。
  • 私がやろうとしているのは、ステートレスな機能コンポーネントの場合の有効なシナリオですか、それとも標準コンポーネントに固執する必要がありますか?
4

3 に答える 3

5

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

Reactのドキュメントから：

これらのコンポーネントは、内部状態を保持してはならず、バッキング インスタンスを持たず、コンポーネントのライフサイクル メソッドを持たない必要があります。

于 2016-09-08T14:22:19.933 に答える