テキスト比較

2 つのテキストファイルの違いを見つける

ライブエディター

未変更行を折りたたむ

折り返しなし

レイアウト

比較精度

シンタックスハイライト

Diffchecker Desktop Diffcheckerを実行する最も安全な方法。Diffchecker Desktopアプリを入手：あなたの差分はコンピューターから出ることはありません！Desktopを入手

Untitled diff

作成日 7 年前差分は期限切れになりません

9 削除

行
合計
削除

文字
合計
削除

この機能を引き続き使用するには、アップグレードしてください Diffchecker Pro 価格を見る

54 行

5 追加

行
合計
追加

文字
合計
追加

この機能を引き続き使用するには、アップグレードしてください Diffchecker Pro 価格を見る

50 行

import React, { useState } from "react";

import ReactDOM from "react-dom";

import ClayButton from "@clayui/button";

import ClayModal, { useModal } from "@clayui/modal";

import "@clayui/css/lib/css/atlas.css";

function Modal({ onModalClose }) {

function Modal({ observer, onClose }) {

const { observer, onClose } = useModal({

onClose: onModalClose

});

return (

<ClayModal.Header>

<h1>Yay! I'm a modal</h1>

</ClayModal.Header>

<ClayModal.Body>

<p>

Bacon ipsum dolor amet venison bresaola brisket ham turkey. Porchetta

pork loin bresaola, flank beef corned beef doner meatloaf venison

pancetta.

</p>

</ClayModal.Body>

<ClayModal.Footer

last={

<ClayButton.Group spaced>

Close me

</ClayButton>

</ClayButton.Group>

}

</ClayModal>

);

}

function App() {

const [showModal, setShowModal] = useState(true);

const handleClose = () => {

const { observer, onClose } = useModal({

setShowModal(false);

onClose: () => setShowModal(false)

};

});

return (

{showModal && <Modal onModalClose={handleClose} />}

{showModal && <Modal observer={observer} onClose={onClose} />}

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

保存された差分

原文

ファイルを開く

import React, { useState } from "react";
import ReactDOM from "react-dom";
import ClayButton from "@clayui/button";
import ClayModal, { useModal } from "@clayui/modal";

import "@clayui/css/lib/css/atlas.css";

function Modal({ onModalClose }) {
  const { observer, onClose } = useModal({
    onClose: onModalClose
  });

return (
    <ClayModal observer={observer} size="md">
      <ClayModal.Header>
        <h1>Yay! I'm a modal</h1>
      </ClayModal.Header>
      <ClayModal.Body>
        <p>
          Bacon ipsum dolor amet venison bresaola brisket ham turkey. Porchetta
          pork loin bresaola, flank beef corned beef doner meatloaf venison
          pancetta.
        </p>
      </ClayModal.Body>
      <ClayModal.Footer
        last={
          <ClayButton.Group spaced>
            <ClayButton displayType="secondary" onClick={onClose}>
              Close me
            </ClayButton>
          </ClayButton.Group>
        }
      />
    </ClayModal>
  );
}

function App() {
  const [showModal, setShowModal] = useState(true);

const handleClose = () => {
    setShowModal(false);
  };

return (
    <div className="App">
      {showModal && <Modal onModalClose={handleClose} />}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

変更されたテキスト

ファイルを開く

import React, { useState } from "react";
import ReactDOM from "react-dom";
import ClayButton from "@clayui/button";
import ClayModal, { useModal } from "@clayui/modal";

import "@clayui/css/lib/css/atlas.css";

function Modal({ observer, onClose }) {
  return (
    <ClayModal observer={observer} size="md">
      <ClayModal.Header>
        <h1>Yay! I'm a modal</h1>
      </ClayModal.Header>
      <ClayModal.Body>
        <p>
          Bacon ipsum dolor amet venison bresaola brisket ham turkey. Porchetta
          pork loin bresaola, flank beef corned beef doner meatloaf venison
          pancetta.
        </p>
      </ClayModal.Body>
      <ClayModal.Footer
        last={
          <ClayButton.Group spaced>
            <ClayButton displayType="secondary" onClick={onClose}>
              Close me
            </ClayButton>
          </ClayButton.Group>
        }
      />
    </ClayModal>
  );
}

function App() {
  const [showModal, setShowModal] = useState(true);

const { observer, onClose } = useModal({
    onClose: () => setShowModal(false)
  });

return (
    <div className="App">
      {showModal && <Modal observer={observer} onClose={onClose} />}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);