如何在React JS中点击按钮加载不同的内容(与已经加载的内容不同的内容)

在React JS中，可以通过使用状态和条件渲染来实现在点击按钮时加载不同的内容。下面是一个基本的示例：

创建一个React组件，包含一个按钮和一个用于显示内容的区域。

import React, { useState } from 'react';

const ContentSwitcher = () => {
  const [content, setContent] = useState(''); // 初始内容为空字符串

  const handleButtonClick = () => {
    // 根据当前内容进行切换
    if (content === 'Content A') {
      setContent('Content B');
    } else {
      setContent('Content A');
    }
  };

  return (
    <div>
      <button onClick={handleButtonClick}>切换内容</button>
      <div>{content}</div>
    </div>
  );
};

export default ContentSwitcher;

在应用中使用该组件。

import React from 'react';
import ContentSwitcher from './ContentSwitcher';

const App = () => {
  return (
    <div>
      <h1>React按钮切换内容示例</h1>
      <ContentSwitcher />
    </div>
  );
};

export default App;

在这个示例中，通过useState钩子函数来定义一个名为content的状态变量，并通过setContent函数来更新它的值。在按钮的点击事件处理函数中，根据当前内容的值，通过条件语句来切换内容。

这个示例中的按钮切换的内容是简单的文本，你可以根据需要替换为任何其他你想要加载的内容，如组件、图片等。

腾讯云相关产品和产品介绍链接地址：