strictStateMode

• strictStateMode(value?: boolean): void

• 5.20241.19 以降、React 相互運用機能はstrictStateModeモードをサポートするようになりました。 これにより、再描画サイクルごとに、すべてのコンポーネントプロパティが JSX で提供される値と同期されます。 JSX 経由でプロパティを設定すると、そのプロパティは外部で制御され、その値の変更は JSX で渡されるstate変数を更新することによってのみ許可されます。

  デフォルトでは、このプロパティは既存のアプリケーションとの互換性を維持するために false に設定されています。 React の状態管理方法に従って Wijmo API をを使用する場合は、 strictStateMode を true に設定します。

  strictStateMode フラグが false の場合、基になるコンポーネントの値は、プロパティ値が変更されたときにのみ同期され、コンポーネントが再描画されたときには同期されません。これにより、JSX で描画された状態と同期されない場合があります。

  たとえば、InputDate のような入力コントロールに値を設定する場合、strictStateMode を false に設定すると、コントロールで異なる値を選択することができます。ただし、値が選択された後、React が管理する状態と描画後の状態に不一致が生じる可能性があり、これが原因でバグが発生することがあります。 そのため、React では制御されたコンポーネントの使用を推奨しています。制御されたコンポーネントでは、値が JSX で外部から提供されると、外部から提供された値自体が変更されない限り、制御値を変更することはできません。上記のような場合 (strictStateMode = true) では、値を変更できるようにするには、valueChanged イベントを処理し、状態変数を更新して制御された値を更新する必要があります。

  function App() {
    const [date, setDate] = useState(new Date());
  
    return (
      <div>
    <InputDate value={date} valueChanged={(s) => setDate(s.value)} />
      </div>
    );
  }

  引数

  • オプション value: boolean

    厳密モードを使用するかどうか。

  戻り値 void