Как открыть определенный свернуть аккордеон при использовании компонента привязки в машинописном тексте

Question

Я новичок в реагировании и дизайне муравьев, я хочу открыть определенный аккордеон при нажатии на определенное место. Идея состоит в том, что, когда я нажимаю на конкретное место, страница переворачивается на этот аккордеон (я добиваюсь этого, используя Anchor Component из antd ), но не открывая этот аккордеон. Вот мой код, где я использую якорь и свернуть компонент. Как мне продолжить, чтобы, когда я нажимал на определенный div, страница переворачивалась на это место, и аккордеон открывался?

 import React, { Component } from 'react';
import { Card, Timeline, Anchor, Collapse } from 'antd';
const Panel = Collapse.Panel;
import FlowData from './data';
import './LearningPathFlowchart.scss';

function callback(key: any) {
  console.log(key);
}

const { Link } = Anchor;

interface ICollapseState {
  isOpen?: boolean;
}

interface Idata {
  href: string;
  title: string | React.ReactNode;
  content: string;
}
const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`;

export default class LearningPathFlowchart extends React.Component<{}, ICollapseState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      isOpen: false,
    };
  }

  public onClick() {
    this.setState({ isOpen: true });
  }
  public render() {
    return (
      <div>
        <Card hoverable style={{ width: '300px', margin: '0px auto', height: '800px' }}>
          <div className='learning-path__flowchart'>
            <Timeline>
              <Anchor affix={false} offsetTop={10} onClick={() => this.onClick}>
                {FlowData.data.map((value: Idata, index) => {
                  return (
                    <div key={index}>
                      <Timeline.Item >
                        <Link href={value.href} title={value.title}>{value.content}</Link>
                      </Timeline.Item>
                    </div>
                  );
                })}
              </Anchor>
            </Timeline>
          </div>

        </Card>
        <div>
          <Collapse onChange={callback}>
            <Panel key='panel1' id='Panel1' header='This is panel header 1' >
              <p>{text}</p>
            </Panel>
            <Panel key='panel2' id='Panel3' header='This is panel header 2' >
              <p>{text}</p>
            </Panel>
            <Panel key='panel3' id='Panel4' header='This is panel header 3'>
              <p>{text}</p>
            </Panel>
          </Collapse>,
        <div style={{ height: '500px' }}>Testing</div>
        </div>
      </div>
    );
  }
}

Answer 1

Если вы пытаетесь открыть Свернуть по щелчку Якорь , то вы должны внести небольшие изменения в свой код. Прежде всего, Collapse antd имеет свойство activeKey , которое принимает ключи активной панели (ссылка: antd collapse API ), так что вы можете просто передать ключ по событию щелчка элемента в привязке.

В вашем случае вы можете передать индекс карты FlowData в качестве ключа для Свернуть и убедиться, что изменили ключ Panel аналогично индексу карты FlowData (0-lastIndexValue).

Вот изменения в вашем коде, которые вам могут понадобиться.

import React, { Component } from 'react';
import { Card, Timeline, Anchor, Collapse } from 'antd';
const Panel = Collapse.Panel;
import FlowData from './data';
import './LearningPathFlowchart.scss';

function callback(key: any) {
  console.log(key);
}

const { Link } = Anchor;

interface ICollapseState {
  isOpen?: boolean;
}

interface Idata {
  href: string;
  title: string | React.ReactNode;
  content: string;
}
const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`;

export default class LearningPathFlowchart extends React.Component<{}, ICollapseState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      isOpen: false,
      collapseActiveKey: '0'
    };
  }

  public onClick() {
    this.setState({ isOpen: true });
  }

  public setCollapseActiveKey(index) {
    this.setState({ collapseActiveKey: index.toString() });
  }

  public render() {
    return (
      <div>
        <Card hoverable style={{ width: '300px', margin: '0px auto', height: '800px' }}>
          <div className='learning-path__flowchart'>
            <Timeline>
              <Anchor affix={false} offsetTop={10} onClick={() => this.onClick}>
                {FlowData.data.map((value: Idata, index) => {
                  return (
                    <div key={index} onClick={_ => this.setCollapseActiveKey(index)}>
                      <Timeline.Item >
                        <Link href={value.href} title={value.title}>{value.content}</Link>
                      </Timeline.Item>
                    </div>
                  );
                })}
              </Anchor>
            </Timeline>
          </div>

        </Card>
        <div>
          <Collapse onChange={callback}  activeKey={[this.state.collapseActiveKey]}>
            <Panel key='1' id='Panel1' header='This is panel header 1' >
              <p>{text}</p>
            </Panel>
            <Panel key='2' id='Panel3' header='This is panel header 2' >
              <p>{text}</p>
            </Panel>
            <Panel key='3' id='Panel4' header='This is panel header 3'>
              <p>{text}</p>
            </Panel>
          </Collapse>,
        <div style={{ height: '500px' }}>Testing</div>
        </div>
      </div>
    );
  }
}