Динамически открывать и закрывать и реагировать Свернуть компонент

Question

Я хочу динамически открывать / закрывать Свернуть Элементы независимо от взаимодействия с пользователем (чтобы показать конкретную панель через результат поиска).

Компонент реакции свертывания имеет setActiveKey (и использует его по щелчку пользователя), но он не доступен для ссылки на узел свертывания.

Есть ли способ открыть или закрыть таким образом, чтобы не вызвать повторную визуализацию?

Я пытался использовать state и props, но это всегда заново отображает полное дерево вложенных компонентов Collapse, что в моем случае занимает более 3 секунд.

Размещение полного кода здесь было бы излишним, так как вложено много взаимозависимых компонентов. Однако основная структура видна здесь: https://codesandbox.io/s/nk64q4xy8p

Я хочу открыть определенную панель через другое взаимодействие с пользователем. В коде ручки, который будет на изменении выбора или нажатии кнопки.

Answer 1

Нет ничего плохого, чтобы сделать это с переменной состояния.Как только состояние или реквизит изменится, он будет рендерить все компоненты, а также следующие компоненты.

Но если есть какие-либо проблемы с производительностью из-за повторного рендеринга, вероятно, вам следует рассмотреть чистые компоненты и реагировать методы жизненного цикла для повышения производительности (или предотвращения повторного рендеринга).

Кроме того, вы также можете использовать специальные реквизитыAntd's Collapse destroyInactivePanel , он уничтожит (размонтирует) неактивные панели.

Код для вашей справки (https://codesandbox.io/s/y30z35p1vv?fontsize=14)

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Collapse, Button, Select } from "antd";

const Panel = Collapse.Panel;
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.
`;

class AvoidRenders extends React.Component {
  state = {
    openPanel: "1"
  };

  onChange = key => {
    this.setState({
      openPanel: key
    });
  };

  render = () => {
    return (
      <div>
        <Select
          dropdownMatchSelectWidth={false}
          defaultValue="1"
          onChange={this.onChange}
        >
          <Select.Option key="1" value="1">
            Panel 1
          </Select.Option>
          <Select.Option key="2" value="2">
            Panel 2
          </Select.Option>
          <Select.Option key="3" value="3">
            Panel 3
          </Select.Option>
        </Select>
        <Collapse activeKey={this.state.openPanel} destroyInactivePanel={true}>
          <Panel header="This is panel header 1" key="1">
            <Text1 />
          </Panel>
          <Panel header="This is panel header 2" key="2">
            <Text2 />
          </Panel>
          <Panel header="This is panel header 3" key="3">
            <Text3 />
          </Panel>
        </Collapse>
      </div>
    );
  };
}

class Text1 extends React.PureComponent {
  componentWillUnmount = () => {
    console.log("Destroyed 1");
  };
  componentWillUpdate = () => {
    console.log("Updated 1");
  };
  render = () => (
    <p>
      {console.log("Rendered 1")}
      {text}
    </p>
  );
}

class Text2 extends React.PureComponent {
  componentWillUnmount = () => {
    console.log("Destroyed 2");
  };
  componentWillUpdate = () => {
    console.log("Updated 2");
  };
  render = () => (
    <p>
      {console.log("Rendered 2")}
      {text}
    </p>
  );
}

class Text3 extends React.PureComponent {
  componentWillUnmount = () => {
    console.log("Destroyed 3");
  };
  componentWillUpdate = () => {
    console.log("Updated 3");
  };
  render = () => (
    <p>
      {console.log("Rendered 3")}
      {text}
    </p>
  );
}

ReactDOM.render(<AvoidRenders />, document.getElementById("container"));

Надеюсь, это поможет.