比较文本

查找两个文本文件之间的差异

实时编辑器

折叠未更改行

关闭换行

视图

比对精度

语法高亮

Diffchecker Desktop 运行Diffchecker最安全的方式。获取Diffchecker桌面应用：您的差异永远不会离开您的电脑！获取桌面版

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