比較文本

尋找兩個文字檔案之間的差異

Real-time diff

Unified diff

Collapse lines

Highlight change

Syntax highlighting

工具

Diffchecker Desktop The most secure way to run Diffchecker. Get the Diffchecker Desktop app: your diffs never leave your computer!Get Desktop

Untitled diff

Created 6 years agoDiff never expires

Lines
Total
Removed

Words
Total
Removed

To continue using this feature, upgrade to Diffchecker Pro View Pricing

54 lines

Lines
Total
Added

Words
Total
Added

To continue using this feature, upgrade to Diffchecker Pro View Pricing

50 lines

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);