ReactJS实现三个按钮点击切换显示对应内容的方法

Hey there! Let's break down what's going wrong here and fix it step by step.

问题分析 #

你的当前代码把每个按钮和它的状态拆成了独立的组件（ASearch、BSearch、CSearch），每个组件都维护自己的showResultsX状态。这意味着当你点击Button B，BSearch的showResultsB变成true，但ASearch的showResultsA还是true——所以两个内容都会显示，这显然不符合你的需求。

核心问题是状态没有被统一管理，各个组件的状态是孤立的，没法互相影响。我们需要把控制显示的状态放到共同的父组件中，让它来统一协调所有按钮和内容的显示。

解决方案：状态提升到父组件 #

我们可以重构你的Program组件，让它维护当前激活的按钮状态，然后所有按钮和内容都依赖这个状态来工作。下面是完整的实现：

类组件版本（适配你原来的代码风格）

import React from 'react';

// 如果你之后需要复杂的内容组件，可以保留这些，否则可以简化
const AResults = () => (
  <div className="search-results">Button A is pressed</div>
);
const BResults = () => (
  <div className="search-results">Button B is pressed</div>
);
const CResults = () => (
  <div className="search-results">Button C is pressed</div>
);

export default class Program extends React.Component {
  constructor(props) {
    super(props);
    // 初始激活按钮为A，对应初始显示A的内容
    this.state = {
      activeButton: 'A'
    };
  }

  // 处理按钮点击，更新激活状态
  handleButtonClick = (button) => {
    this.setState({ activeButton: button });
  };

  render() {
    const { activeButton } = this.state;

    return (
      <div>
        {/* 三个按钮，点击时触发状态更新 */}
        <button onClick={() => this.handleButtonClick('A')}>Button A</button>
        <button onClick={() => this.handleButtonClick('B')}>Button B</button>
        <button onClick={() => this.handleButtonClick('C')}>Button C</button>

        {/* 根据当前激活按钮显示对应内容 */}
        <div>
          {activeButton === 'A' && <AResults />}
          {activeButton === 'B' && <BResults />}
          {activeButton === 'C' && <CResults />}
        </div>
      </div>
    );
  }
}

函数组件版本（React 16.8+ 推荐写法）

如果你愿意使用更简洁的函数组件和Hook，可以这样写：

import React, { useState } from 'react';

const Program = () => {
  // 初始激活按钮为A
  const [activeButton, setActiveButton] = useState('A');

  const handleButtonClick = (button) => {
    setActiveButton(button);
  };

  // 简单内容可以直接用映射，不需要单独组件
  const contentMap = {
    A: 'Button A is pressed',
    B: 'Button B is pressed',
    C: 'Button C is pressed'
  };

  return (
    <div>
      <button onClick={() => handleButtonClick('A')}>Button A</button>
      <button onClick={() => handleButtonClick('B')}>Button B</button>
      <button onClick={() => handleButtonClick('C')}>Button C</button>

      <div className="search-results">
        {contentMap[activeButton]}
      </div>
    </div>
  );
};

export default Program;

关键说明 #

1. 状态统一管理：把activeButton状态放在父组件Program中，所有按钮和内容都依赖这个状态，确保点击任何按钮都会同步更新显示内容。
2. 简洁的条件渲染：可以用对象映射（contentMap）简化内容显示，也可以保留独立的内容组件用条件判断渲染，根据你的需求选择。
3. 状态提升模式：这是React中处理跨组件共享状态的常用方式，当多个组件需要同步状态时，把状态提升到它们的共同父组件中是最直接的解决方案。

内容的提问来源于stack exchange，提问作者Anant Sharma