react

import React, { useState, useEffect } from 'react';
import { Dialog, DialogType, DialogFooter, PrimaryButton } from '@fluentui/react';

const MyDialog = ({ showDialog, onClose }) => {
  useEffect(() => {
    console.log('useEffectが実行されました');
    // ここで必要な処理を行う
  }, []);

  return (
    <Dialog
      hidden={!showDialog}
      onDismiss={onClose}
      dialogContentProps={{
        type: DialogType.normal,
        title: 'ダイアログのタイトル',
      }}
      modalProps={{
        isBlocking: false,
        styles: { main: { maxWidth: 600 } },
      }
    >
      <div>
        <p>ダイアログ内容</p>
      </div>
      <DialogFooter>
        <PrimaryButton onClick={onClose} text="閉じる" />
      </DialogFooter>
    </Dialog>
  );
};

const ParentComponent = () => {
  const [isDialogVisible, setIsDialogVisible] = useState(false);
  const [key, setKey] = useState(0);

  const openDialog = () => {
    setIsDialogVisible(true);
    setKey(key + 1); // キーを変更してコンポーネントを再マウント
  }

  const closeDialog = () => {
    setIsDialogVisible(false);
  }

  return (
    <div>
      <button onClick={openDialog}>ダイアログを開く</button>
      <MyDialog key={key} showDialog={isDialogVisible} onClose={closeDialog} />
    </div>
  );
};

export default ParentComponent;













import React, { useState, useEffect } from 'react';
import { Dialog, DialogType, DialogFooter, PrimaryButton } from '@fluentui/react';

const MyDialog = ({ showDialog, onClose }) => {
  const [error, setError] = useState(null);

  useEffect(() => {
    try {
      // ここで何らかの処理を行う
      if (/* エラー条件 */) {
        throw new Error("エラーが発生しました");
      }
      setError(null); // エラーがなければエラーステートをクリア
    } catch (error) {
      setError(error); // エラーが発生した場合、エラーステートを設定
    }
  }, [showDialog]);

  const closeDialog = () => {
    setError(null); // ダイアログを閉じる前にエラーステートをクリア
    onClose();
  }

  return (
    <Dialog
      hidden={!showDialog}
      onDismiss={closeDialog}
      dialogContentProps={{
        type: DialogType.normal,
        title: 'ダイアログのタイトル',
      }}
      modalProps={{
        isBlocking: false,
        styles: { main: { maxWidth: 600 } },
      }
    >
      {error ? (
        <div>
          <p>エラーが発生しました: {error.message}</p>
          <DialogFooter>
            <PrimaryButton onClick={closeDialog} text="閉じる" />
          </DialogFooter>
        </div>
      ) : (
        <div>
          <p>ダイアログ内容</p>
        </div>
      )}
    </Dialog>
  );
};

const ParentComponent = () => {
  const [isDialogVisible, setIsDialogVisible] = useState(false);

  const openDialog = () => {
    setIsDialogVisible(true);
  }

  const closeDialog = () => {
    setIsDialogVisible(false);
  }

  return (
    <div>
      <button onClick={openDialog}>ダイアログを開く</button>
      <MyDialog showDialog={isDialogVisible} onClose={closeDialog} />
    </div>
  );
};

export default ParentComponent;
























import React, { useState } from 'react';

function MyComponent() {
  const [booleanState, setBooleanState] = useState(false);

  const toggleState = () => {
    setBooleanState(!booleanState); // Booleanの状態を反転
  };

  return (
    <div>
      <p>State is: {booleanState.toString()}</p>
      <button onClick={toggleState}>Toggle State</button>
    </div>
  );
}

export default MyComponent;







import React, { useRef } from 'react';

function MyComponent() {
  const booleanState = useRef(false);

  const toggleState = () => {
    booleanState.current = !booleanState.current; // Booleanの状態を反転
    console.log('State is now', booleanState.current);
  };

  return (
    <div>
      <p>State is: {booleanState.current.toString()}</p>
      <button onClick={toggleState}>Toggle State</button>
    </div>
  );
}

export default MyComponent;