ReactJS跨组件实现点击按钮置顶对应文本功能方案

解决这类兄弟组件交互问题的核心方案是状态提升——把需要共享的状态和交互逻辑放到它们的共同父组件中，再通过props将状态和回调传递给子组件。以下是具体实现步骤：

1. 修正基础组件并添加props支持 #

先修复代码里的变量名错误，同时让子组件具备接收父组件传递数据和回调的能力：

Buttons.js

const btnArr = ["Toggle Text 1", "Toggle Text 2", "Toggle Text 3"];

const Buttons = ({ onButtonClick }) => {
  return (
    <div style={{ width: "50%" }}>
      {btnArr.map((btnText, index) => (
        <button 
          key={index} 
          onClick={() => onButtonClick(index)}
          style={{ display: "block", margin: "8px 0", padding: "6px 12px" }}
        >
          {btnText}
        </button>
      ))}
    </div>
  );
};

export default Buttons;

Texts.js

const Texts = ({ textList }) => {
  return (
    <div style={{ width: "50%" }}>
      {textList.map((txt, index) => (
        <div key={index} style={{ margin: "8px 0", padding: "8px", border: "1px solid #eee" }}>
          {txt}
        </div>
      ))}
    </div>
  );
};

export default Texts;

2. 在父组件中管理状态和交互逻辑 #

创建父组件（比如App.js），负责维护文本数据状态、处理排序逻辑，并将状态和回调传递给子组件：

import { useState } from 'react';
import Buttons from './Buttons';
import Texts from './Texts';

const App = () => {
  // 原始文本数据源
  const originalTexts = ["Text 1", "Text 2", "Text 3"];
  // 维护排序后的文本列表状态
  const [sortedTexts, setSortedTexts] = useState(originalTexts);

  // 按钮点击处理：将对应索引的文本移到列表首位
  const handleButtonClick = (index) => {
    const targetText = originalTexts[index];
    // 生成新数组：目标文本 + 排除目标后的剩余文本
    const newSortedList = [
      targetText,
      ...originalTexts.filter(text => text !== targetText)
    ];
    setSortedTexts(newSortedList);
  };

  return (
    <div style={{ display: "flex", width: "100%", gap: "20px", padding: "20px" }}>
      <Buttons onButtonClick={handleButtonClick} />
      <Texts textList={sortedTexts} />
    </div>
  );
};

export default App;

核心逻辑说明 #

• 父组件作为状态中枢，存储原始文本数据和排序后的列表，同时定义点击后的排序规则，保证状态变化可追踪。
• Buttons组件通过onButtonClick props接收父组件的回调，点击时把对应按钮的索引传递给父组件触发状态更新。
• Texts组件通过textList props接收排序后的列表，直接渲染即可，无需关心状态变化逻辑。

这种方式完全符合React单向数据流原则，既实现了跨组件交互，也让代码结构更清晰。

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