javascript - 动态打开和关闭 antd/react 折叠组件

Question

我想独立于用户交互动态打开/关闭折叠元素(通过搜索结果显示特定面板)。

Collapse React 组件具有 setActiveKey(并在用户点击时使用它)但它不会暴露给 Collapse Node 引用。

有没有以一种不会触发重新渲染的方式打开或关闭？

我尝试使用 state 和 props，但这总是会重新渲染嵌套 Collapse 组件的完整树，在我的例子中这需要超过 3 秒的时间。

由于嵌套了许多相互依赖的组件，因此在此发布完整代码会过多。然而，基本结构在这里可见:https://codesandbox.io/s/nk64q4xy8p

我想通过不同的用户交互打开特定面板。在选择或单击按钮的 onChange 中。

Answer 1

用状态变量做这件事没什么不好的。一旦状态或 Prop 发生变化，它将渲染整个组件以及下一个组件。

但如果由于重新渲染而出现任何性能问题，您可能应该查看 pure components 并使用react lifecycle methods 以提高性能(或避免重新渲染)。

此外，还可以使用Antd的Collapse destroyInactivePanel的特殊 Prop ，它会销毁(卸载)不活动的面板。

供您引用的代码 ( 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"));

我希望这会有所帮助。