Texte vergleichen

Finde den Unterschied zwischen zwei Textdateien

Live-Editor

Gleiches ausblenden

Zeilenumbruch aus

Ansicht

Vergleichsgenauigkeit

Syntaxhervorhebung

Diffchecker Desktop Der sicherste Weg, Diffchecker zu nutzen. Hol dir die Desktop-App: Deine Diffs verlassen nie deinen Computer!Desktop holen

vscode插件i18n-automatically扫描前后jsx的对比图

Erstellt vor 2 JahrenDiff läuft nie ab

24 Entfernungen

Zeilen
Gesamt
Entfernt

Zeichen
Gesamt
Entfernt

Um diese Funktion weiterhin zu nutzen, aktualisiere auf Diffchecker Pro Preise anzeigen

194 Zeilen

84 Hinzufügungen

Zeilen
Gesamt
Hinzugefügt

Zeichen
Gesamt
Hinzugefügt

Um diese Funktion weiterhin zu nutzen, aktualisiere auf Diffchecker Pro Preise anzeigen

237 Zeilen

// test.jsx

import i18n from '@/i18n'; // test.jsx

import React, { useState, useEffect, useCallback, useMemo } from 'react';

import PropTypes from 'prop-types';

// 模拟的 API 调用函数

const fetchUserData = () => {

return new Promise((resolve) => {

setTimeout(() => {

resolve({

name: '张三',

name: i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-1'),

age: 30,

occupation: '软件工程师',

occupation: i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-2'),

});

}, 1000);

});

};

// 错误边界组件

class ErrorBoundary extends React.Component {

constructor(props) {

super(props);

this.state = { hasError: false, error: null };

}

static getDerivedStateFromError(error) {

return { hasError: true, error };

}

componentDidCatch(error, errorInfo) {

console.error('错误边界捕获到错误:', error, errorInfo);

}

render() {

if (this.state.hasError) {

return <h2>很抱歉，出现了错误：{this.state.error.message}</h2>;

return (

<h2>

{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-3')}

{this.state.error.message}

</h2>

);

}

return this.props.children;

}

// 头部组件

const Header = ({ title }) => (

<h1>{title}</h1>

<nav>

<ul>

<li>

{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-4')}

</a>

</li>

<li>

{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-5')}

</a>

</li>

<li>

{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-6')}

</a>

</li>

</ul>

</nav>

</header>

);

Header.propTypes = {

title: PropTypes.string.isRequired,

};

// 用户信息组件

const UserInfo = ({ user }) => (

<h3>{user.name}的个人信息</h3>

<h3>

{user.name}

<p>职业：{user.occupation}</p>

{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-7')}

</h3>

<p>

{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-8')}

{user.age}

</p>

<p>

{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-9')}

{user.occupation}

</p>

</div>

);

// 计数器组件

const Counter = () => {

const [count, setCount] = useState(0);

const increment = () => setCount((prevCount) => prevCount + 1);

const decrement = () => setCount((prevCount) => prevCount - 1);

return (

<div>

<h3>{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-10')}</h3>

<p>当前计数：{count}</p>

<p>

{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-11')}

{count}

</p>

{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-12')}

</button>

{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-13')}

</button>

</div>

);

};

// 待办事项组件

const TodoList = () => {

const [todos, setTodos] = useState([]);

const [inputValue, setInputValue] = useState('');

const handleInputChange = (e) => setInputValue(e.target.value);

const handleSubmit = (e) => {

e.preventDefault();

if (inputValue.trim()) {

setTodos([

...todos,

{ id: Date.now(), text: inputValue, completed: false },

]);

setInputValue('');

}

};

const toggleTodo = (id) => {

setTodos(

todos.map((todo) =>

todo.id === id ? { ...todo, completed: !todo.completed } : todo,

);

};

return (

<div>

<h3>{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-14')}</h3>

<input

type="text"

value={inputValue}

onChange={handleInputChange}

placeholder="输入新的待办事项"

placeholder={i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-15')}

{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-16')}

</button>

</form>

<ul>

{todos.map((todo) => (

<li

key={todo.id}

onClick={() => toggleTodo(todo.id)}

style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}

{todo.text}

</li>

))}

</ul>

</div>

);

};

// 主应用组件

const App = () => {

const [user, setUser] = useState(null);

const [isLoading, setIsLoading] = useState(true);

const [error, setError] = useState(null);

useEffect(() => {

fetchUserData()

.then((data) => {

setUser(data);

setIsLoading(false);

})

.catch((err) => {

setError('获取用户数据时出错');

setError(i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-17'));

setIsLoading(false);

console.error('获取用户数据失败:', err);

});

}, []);

const welcomeMessage = useMemo(() => {

return user ? `欢迎回来，${user.name}！` : '欢迎来到我们的应用！';

return user

? `${i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-18')}${user.name}！`

: i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-19');

}, [user]);

const handleError = useCallback(() => {

throw new Error('这是一个故意抛出的错误');

}, []);

if (isLoading) return <div>加载中，请稍候...</div>;

if (isLoading)

if (error) return <div>错误：{error}</div>;

return <div>{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-20')}</div>;

if (error)

return (

<div>

{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-21')}

{error}

</div>

);

return (

<Header

title={i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-22')}

<main>

<h2>{welcomeMessage}</h2>

{user && <UserInfo user={user} />}

<button onClick={handleError}>点击触发错误</button>

{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-23')}

</button>

</main>

<p>{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-24')}</p>

</footer>

</div>

</ErrorBoundary>

);

};

export default App;

Gespeicherte Diffs

Originaltext

Datei öffnen

// test.jsx
import React, { useState, useEffect, useCallback, useMemo } from 'react';
import PropTypes from 'prop-types';

// 模拟的 API 调用函数
const fetchUserData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        name: '张三',
        age: 30,
        occupation: '软件工程师',
      });
    }, 1000);
  });
};

// 错误边界组件
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

componentDidCatch(error, errorInfo) {
    console.error('错误边界捕获到错误:', error, errorInfo);
  }

render() {
    if (this.state.hasError) {
      return <h2>很抱歉，出现了错误：{this.state.error.message}</h2>;
    }
    return this.props.children;
  }
}

// 头部组件
const Header = ({ title }) => (
  <header>
    <h1>{title}</h1>
    <nav>
      <ul>
        <li>
          <a href="#home">首页</a>
        </li>
        <li>
          <a href="#about">关于我们</a>
        </li>
        <li>
          <a href="#contact">联系方式</a>
        </li>
      </ul>
    </nav>
  </header>
);

Header.propTypes = {
  title: PropTypes.string.isRequired,
};

// 用户信息组件
const UserInfo = ({ user }) => (
  <div className="user-info">
    <h3>{user.name}的个人信息</h3>
    <p>年龄：{user.age}</p>
    <p>职业：{user.occupation}</p>
  </div>
);

// 计数器组件
const Counter = () => {
  const [count, setCount] = useState(0);

const increment = () => setCount((prevCount) => prevCount + 1);
  const decrement = () => setCount((prevCount) => prevCount - 1);

return (
    <div>
      <h3>计数器</h3>
      <p>当前计数：{count}</p>
      <button onClick={increment}>增加</button>
      <button onClick={decrement}>减少</button>
    </div>
  );
};

// 待办事项组件
const TodoList = () => {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

const handleInputChange = (e) => setInputValue(e.target.value);

const toggleTodo = (id) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo,
      ),
    );
  };

return (
    <div>
      <h3>待办事项</h3>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={inputValue}
          onChange={handleInputChange}
          placeholder="输入新的待办事项"
        />
        <button type="submit">添加</button>
      </form>
      <ul>
        {todos.map((todo) => (
          <li
            key={todo.id}
            onClick={() => toggleTodo(todo.id)}
            style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
          >
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
};

// 主应用组件
const App = () => {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

useEffect(() => {
    fetchUserData()
      .then((data) => {
        setUser(data);
        setIsLoading(false);
      })
      .catch((err) => {
        setError('获取用户数据时出错');
        setIsLoading(false);
        console.error('获取用户数据失败:', err);
      });
  }, []);

const welcomeMessage = useMemo(() => {
    return user ? `欢迎回来，${user.name}！` : '欢迎来到我们的应用！';
  }, [user]);

const handleError = useCallback(() => {
    throw new Error('这是一个故意抛出的错误');
  }, []);

if (isLoading) return <div>加载中，请稍候...</div>;
  if (error) return <div>错误：{error}</div>;

return (
    <ErrorBoundary>
      <div className="app">
        <Header title="我的 React 应用" />
        <main>
          <h2>{welcomeMessage}</h2>
          {user && <UserInfo user={user} />}
          <Counter />
          <TodoList />
          <button onClick={handleError}>点击触发错误</button>
        </main>
        <footer>
          <p>© 2024 我的 React 应用。保留所有权利。</p>
        </footer>
      </div>
    </ErrorBoundary>
  );
};

export default App;

Bearbeitung

Datei öffnen

import i18n from '@/i18n'; // test.jsx
import React, { useState, useEffect, useCallback, useMemo } from 'react';
import PropTypes from 'prop-types';

// 模拟的 API 调用函数
const fetchUserData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        name: i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-1'),
        age: 30,
        occupation: i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-2'),
      });
    }, 1000);
  });
};

// 错误边界组件
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

componentDidCatch(error, errorInfo) {
    console.error('错误边界捕获到错误:', error, errorInfo);
  }

render() {
    if (this.state.hasError) {
      return (
        <h2>
          {i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-3')}
          {this.state.error.message}
        </h2>
      );
    }
    return this.props.children;
  }
}

// 头部组件
const Header = ({ title }) => (
  <header>
    <h1>{title}</h1>
    <nav>
      <ul>
        <li>
          <a href="#home">
            {i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-4')}
          </a>
        </li>
        <li>
          <a href="#about">
            {i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-5')}
          </a>
        </li>
        <li>
          <a href="#contact">
            {i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-6')}
          </a>
        </li>
      </ul>
    </nav>
  </header>
);

Header.propTypes = {
  title: PropTypes.string.isRequired,
};

// 用户信息组件
const UserInfo = ({ user }) => (
  <div className="user-info">
    <h3>
      {user.name}
      {i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-7')}
    </h3>
    <p>
      {i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-8')}
      {user.age}
    </p>
    <p>
      {i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-9')}
      {user.occupation}
    </p>
  </div>
);

// 计数器组件
const Counter = () => {
  const [count, setCount] = useState(0);

const increment = () => setCount((prevCount) => prevCount + 1);
  const decrement = () => setCount((prevCount) => prevCount - 1);

return (
    <div>
      <h3>{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-10')}</h3>
      <p>
        {i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-11')}
        {count}
      </p>
      <button onClick={increment}>
        {i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-12')}
      </button>
      <button onClick={decrement}>
        {i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-13')}
      </button>
    </div>
  );
};

// 待办事项组件
const TodoList = () => {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

const handleInputChange = (e) => setInputValue(e.target.value);

const toggleTodo = (id) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo,
      ),
    );
  };

return (
    <div>
      <h3>{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-14')}</h3>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={inputValue}
          onChange={handleInputChange}
          placeholder={i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-15')}
        />

<button type="submit">
          {i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-16')}
        </button>
      </form>
      <ul>
        {todos.map((todo) => (
          <li
            key={todo.id}
            onClick={() => toggleTodo(todo.id)}
            style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
          >
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
};

// 主应用组件
const App = () => {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

useEffect(() => {
    fetchUserData()
      .then((data) => {
        setUser(data);
        setIsLoading(false);
      })
      .catch((err) => {
        setError(i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-17'));
        setIsLoading(false);
        console.error('获取用户数据失败:', err);
      });
  }, []);

const welcomeMessage = useMemo(() => {
    return user
      ? `${i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-18')}${user.name}！`
      : i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-19');
  }, [user]);

const handleError = useCallback(() => {
    throw new Error('这是一个故意抛出的错误');
  }, []);

if (isLoading)
    return <div>{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-20')}</div>;
  if (error)
    return (
      <div>
        {i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-21')}
        {error}
      </div>
    );

return (
    <ErrorBoundary>
      <div className="app">
        <Header
          title={i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-22')}
        />
        <main>
          <h2>{welcomeMessage}</h2>
          {user && <UserInfo user={user} />}
          <Counter />
          <TodoList />
          <button onClick={handleError}>
            {i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-23')}
          </button>
        </main>
        <footer>
          <p>{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-24')}</p>
        </footer>
      </div>
    </ErrorBoundary>
  );
};

export default App;