如何通过点击MockTable组件图标打开AddMock组件的折叠栏？

这是个典型的组件间通信场景，咱们可以通过状态提升的方式来解决——把控制折叠栏展开的状态放到两个组件的共同父组件里，再通过props传递事件和状态，就能实现点击操作图标打开折叠栏的需求。

步骤1：在共同父组件中管理折叠状态 #

首先，创建一个父组件（或者用你现有的页面组件），用来存放折叠栏的展开状态，同时定义一个触发展开的回调函数：

import React, { useState } from 'react';
import MockTable from './MockTable';
import AddMock from './AddMock';

const MockManager = () => {
  // 初始状态为折叠状态（false）
  const [isAccordionExpanded, setIsAccordionExpanded] = useState(false);

  // 处理操作图标点击的函数：点击后将折叠栏设为展开状态
  const handleMockActionClick = () => {
    setIsAccordionExpanded(true);
  };

  return (
    <div className="mock-container">
      {/* 把回调传给MockTable */}
      <MockTable onActionClick={handleMockActionClick} />
      {/* 把展开状态传给AddMock */}
      <AddMock isExpanded={isAccordionExpanded} />
    </div>
  );
};

export default MockManager;

步骤2：给MockTable的操作图标绑定点击事件 #

修改MockTable组件，给每个操作图标添加onClick事件，触发父组件传来的回调：

import { Icon } from 'semantic-ui-react';

const MockTable = ({ onActionClick }) => {
  // 这里省略表格的其他结构，只展示操作列部分
  return (
    <tr>
      {/* 表格其他列... */}
      <td>
        <Icon link name="eye" onClick={onActionClick} />
        <Icon link name="edit" onClick={onActionClick} />
        <Icon link name="delete" onClick={onActionClick} />
      </td>
    </tr>
  );
};

export default MockTable;

步骤3：在AddMock中接收状态并控制折叠栏 #

修改AddMock组件，通过父组件传来的isExpanded状态控制Accordion的展开。这里利用React Bootstrap Accordion的activeKey属性来设置激活的折叠项：

import { Accordion, Card, Button, Container } from 'react-bootstrap';
import { Header } from 'semantic-ui-react';
import TabContent from './TabContent';

const AddMock = ({ isExpanded }) => {
  return (
    <div className="row">
      <Accordion 
        style={{ paddingLeft: "32px" }}
        // 根据isExpanded设置激活的折叠项：展开时设为"0"，否则不设置
        activeKey={isExpanded ? "0" : undefined}
      >
        <Card className="collapseStyle">
          <Card.Header>
            <Accordion.Toggle as={Button} variant="link" eventKey="0">
              Add Mock
            </Accordion.Toggle>
          </Card.Header>
          <Accordion.Collapse eventKey="0">
            <Card.Body>
              <Container className="mockbody">
                <Header as="h3">Hierarchy</Header>
                <TabContent />
              </Container>
            </Card.Body>
          </Accordion.Collapse>
        </Card>
      </Accordion>
    </div>
  );
};

export default AddMock;

额外扩展：传递Mock数据（可选） #

如果你的需求是点击查看/编辑图标时，还要把对应条目的数据传给AddMock（比如填充表单），可以修改回调函数接收参数：

在MockTable中传递数据：

<Icon link name="edit" onClick={() => onActionClick(mockItem)} />

然后在父组件中更新状态：

const [selectedMock, setSelectedMock] = useState(null);
const [isAccordionExpanded, setIsAccordionExpanded] = useState(false);

const handleMockActionClick = (mockItem) => {
  setSelectedMock(mockItem);
  setIsAccordionExpanded(true);
};

最后把selectedMock传给AddMock，用来填充表单内容即可。

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