Reactはグローバル箇条書きボックスメソッドをカプセル化します

/* eslint を無効にする react/no-render-return-value */
React をインポートします。{ コンポーネント } を 'react' からインポートします。
'immutable' から { is, fromJS } をインポートします
'react-dom' から ReactDOM をインポートします。
'./alert.less' をインポートします

const close = require('../images/guanbi.png')
定数 line = require('../images/line.png')

定数デフォルト状態 = {
  アラートステータス: false、
  アラートヒント: null、
  アラートタイトル: '詳細',
  クローズアラート: () => {}
}

クラス Toptips は Component を拡張します {
  状態 = {
    ...デフォルト状態
  }

  //cssアニメーションコンポーネントがターゲットコンポーネントに設定されます FirstChild = props => {
    const childrenArray = React.Children.toArray(props.children)
    childrenArray[0]を返す || null
  }

  // ポップアップボックスを閉じる confirm = () => {
    const that = this
    console.log(それ)
    this.setState() は、
      {
        アラートステータス: false
      },
      () => {
        that.state.closeAlert()
      }
    ）
  }

  オープン = データ => {
    const オプション = データ || {}
    オプション.alertStatus = true
    this.setState({
      ...デフォルト状態、
      ...オプション
    })
  }

  閉じる = () => {
    const that = this
    that.state.closeAlert()
    this.setState({
      ...デフォルト状態
    })
  }

  コンポーネントの更新 = (次のプロパティ、次の状態) => {
    戻る （
      !is(fromJS(this.props), fromJS(nextProps)) ||
      !is(fromJS(this.state), fromJS(nextState))
    ）
  }

  与える（） {
    const { alertStatus、alertTip、alertTitle } = this.state
    console.log(アラートヒント、アラートタイトル)
    戻る （
        <div
          クラス名="アラートコン"
          style={alertStatus ? {display: 'block' } : {display: 'none' }}
        >
          <div className="アラートコンテキスト">
            <div className="アラートコンテンツタイトル">{アラートタイトル}</div>
            <img className="alert-content-line" src={line} alt="line" />
            <div className="alert-content-detail">{アラートヒント}</div>
            <画像
              役割="プレゼンテーション"
              クリックすると{() => {
                確認()
              }}
              className="アラートを閉じる"
              src={閉じる}
              alt="閉じる"
            />
          </div>
        </div>
    ）
  }
}

定数div = document.createElement('div')
定数プロパティ = {}
ドキュメント本体に子要素を追加します。

const Box = ReactDOM.render(React.createElement(Toptips, props), div)

デフォルトボックスをエクスポート

.アラート-コン{
  位置: 固定;
  上: 0;
  左: 0;
  幅: 100%;
  高さ: 100%;
  背景: rgba(255, 255, 255, 0.3);
  Zインデックス: 222;
}
.アラートコンテキスト{
  // 背景色: #fff;
  // 境界線の半径: 16px;
  位置: 相対的;
  // 高さ: 500px;
  高さ: 90%;
  幅: 750ピクセル;
  マージン: 40px 自動 0;
  背景: url(../images/alertBJ.png) 繰り返しなし 中央;
  背景サイズ: 100% 100%;
  .アラートを閉じる{
    幅: 30ピクセル;
    高さ: 30px;
    位置: 絶対;
    右: 30px;
    上: 30px;
  }
  .アラートコンテンツタイトル{
    幅: 100%;
    高さ: 80px;
    行の高さ: 80px;
    色: #fff;
    テキスト配置: 中央;
    フォントサイズ: 36px;
    フォントの太さ: 太字;
    // 背景: url(../images/line.png) no-repeat left bottom;
  }
  .アラートコンテンツ行{
    幅: 100%;
    高さ: 20px;
    上マージン: -44px;
    左マージン: -6px;
  }
  .アラート詳細リスト{
    幅: 102%;
    高さ: 100%;
    オーバーフロー-y: 自動;
    パディング: 20px 60px;
    .アラート詳細リストC{
      p{
        &:n番目の子(1){
          フォントサイズ: 14px;
          行の高さ: 20px;
          色: #FFFFFF;
          文字間隔: 1.4px;
        }
        &:n番目の子(2){
          行の高さ: 24px;
          フォントサイズ: 18px;
          色: #FFFFFF;
        }
      }
    }
  }
  .アラートコンテンツの詳細{
    // 高さ: 100%;
    高さ: calc(100% - 100px);
    /* オーバーフロー-y: 自動; */
    オーバーフロー: 非表示;
    幅: 98%;
    上マージン: -26px;
  }
  .アラート詳細-pdf{
    幅: 102%;
    高さ: 100%;
    オーバーフロー-y: 自動;
    パディング: 20px 60px;
    .アラート詳細ボタン{
      ディスプレイ: フレックス;
      flex-direction: 行;
      コンテンツの端揃え: flex-end;
      下マージン: 10px;
      p{
        色:#fff;
        行の高さ: 35px;
        フォントサイズ: 16px;
        右マージン: 20px;
      }
      {
        行の高さ: 35px;
        フォントサイズ: 16px;
        右マージン: 20px;
      }
    }
  }
.cameraWrap{
  幅: 100%;
  高さ: 102%;
  ボックスのサイズ: 境界線ボックス;
  パディング: 12px 4px 0 14px;
}
}

「./Toptips」からToptipsをインポートします
トップヒント.open({
      alertTitle: 「コメントの詳細」、
      アラートヒント: that.htms(val),
      クローズアラート: 関数 () {
        console.log("閉じました...");
      }
    });
  htms = val => {
    戻る (<div className="alert-detais-list">
      <div className="アラートの詳細リスト-C">
        <p>コメント内容:</p>
        <p>{val.fdタイトル}</p>
      </div>
      <div className="アラートの詳細リスト-C">
        <p>コメントの詳細:</p>
        <p>{val.fdタイトル}</p>
      </div>
      <div className="アラートの詳細リスト-C">
        <p>測定と結果:</p>
        <p>{val.fdContent}</p>
      </div>
      <div className="アラートの詳細リスト-C">
        <p>進捗状況の詳細:</p>
        <p></p>
      </div>
    </div>)
  }