ReactでuseStateを使用する詳細な例

React をインポートし、{useState} を 'react' から取得します。

'./index.less' からスタイルをインポートします。

関数Link(props) {
  const { 一致: { パラメータ: { リンク = '' } = {} } = {} } = プロパティ;
  const enCodeUrl = decodeURIComponent(リンク);
  const url = enCodeUrl.startsWith('http') ? enCodeUrl : `http://${enCodeUrl}`;
  戻る （
    <React.フラグメント>
        <iframe
          タイトル={リンク}
          src={url}
          スタイル={{ 幅: '100%', 高さ: '100%', 垂直配置: 'top' }}
          フレームボーダー="0"
        />
    </React.フラグメント>
  );
}

デフォルトリンクをエクスポートします。

'react' から React をインポートします。
'antd' から Spin をインポートします。

'./index.less' からスタイルをインポートします。

デフォルトのクラスLinkをエクスポートし、React.Componentを拡張します。
  状態 = {
    //ストアの読み込みステータス iLoading: true,
  };

  リンクロード() {
    // 更新の読み込み
    this.setState({ iLoading: false });
  }

  与える（） {
    const { 一致: { パラメータ: { リンク = '' } = {} } = {} } = this.props;
    const { iLoading } = this.state;
    const enCodeUrl = decodeURIComponent(リンク);
    const url = enCodeUrl.startsWith('http') ? enCodeUrl : `http://${enCodeUrl}`;
    戻る （
      <React.フラグメント>
        <Spin spinning={iLoading} wrapperClassName={styles['iframe-loading']}>
          <iframe
            onLoad = {this.linkLoad.bind(this)}
            タイトル={リンク}
            src={url}
            スタイル={{ 幅: '100%', 高さ: '100%', 垂直配置: 'top' }}
            フレームボーダー="0"
          />
        </スピン>
      </React.フラグメント>
    );
  }
}

useState をインポートする
React をインポートし、{useState} を 'react' から取得します。
状態を定義します // useState のパラメーターは状態の初期値であり、setInitLoading は状態値を変更するメソッドです const [initLoading, setInitLoading] = useState(true);
状態の更新 onLoad = {() => setInitLoading(false)}
完全なコードは次のとおりです。

React をインポートし、{useState} を 'react' から取得します。
'hzero-ui' から Spin をインポートします。

'./index.less' からスタイルをインポートします。

関数Link(props) {
  const { 一致: { パラメータ: { リンク = '' } = {} } = {} } = プロパティ;
  定数[initLoading、setInitLoading] = useState(true);
  const enCodeUrl = decodeURIComponent(リンク);
  const url = enCodeUrl.startsWith('http') ? enCodeUrl : `http://${enCodeUrl}`;
  戻る （
    <React.フラグメント>
      <Spin spinning={initLoading} wrapperClassName={styles['iframe-loading']}>
        <iframe
          onLoad = {() => setInitLoading(false)}
          タイトル={リンク}
          src={url}
          スタイル={{ 幅: '100%', 高さ: '100%', 垂直配置: 'top' }}
          フレームボーダー="0"
        />
      </スピン>
    </React.フラグメント>
  );
}

デフォルトリンクをエクスポートします。

const [パラメータ、setParams] = useState({
  回転: 0,
  色: "#000000"
});

const handleInputChange = イベント => {
  定数ターゲット = イベント.ターゲット;
  setParams({
    ...パラメータ、
    [ターゲット名]: ターゲット値
  });
};