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

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

Collapse react组件具有setActiveKey（并在用户单击时使用），但它不公开于Collapse节点引用

是否存在以不会触发重新渲染的方式打开或关闭的方法

我尝试使用状态和道具，但这总是会重新呈现嵌套折叠组件的完整树，在我的例子中，这需要3秒钟以上

在这里发布完整的代码是多余的，因为嵌套了许多相互依赖的组件。但是，基本结构在此处可见：

---

我想通过不同的用户交互打开特定的面板。在更改选择或单击按钮后的代码笔中。

使用状态变量没有什么不好的。一旦状态或道具更改，它将渲染整个组件以及下一个组件

但是，如果由于重新渲染而出现任何性能问题，您可能应该查看，并作出反应，以提高性能（或避免重新渲染）

此外，您还可以使用Antd的折叠销毁非活动面板的特殊道具，它将销毁（卸载）非活动面板

供您参考的代码（）

从“React”导入React；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“/index.css”；
从“antd”导入{折叠，按钮，选择}；
const Panel=Collapse.Panel；
常量文本=`
狗是一种家养动物。
以忠诚和忠诚著称，
在世界各地的许多家庭中，它都是受欢迎的客人。
`;
类AvoidRenders扩展了React.Component{
状态={
openPanel：“1”
};
onChange=key=>{
这是我的国家({
打开面板：键
});
};
渲染=（）=>{
返回(
小组1
小组2
小组3
);
};
}
类Text1扩展了React.PureComponent{
组件将卸载=（）=>{
控制台日志（“已销毁1”）；
};
组件将更新=（）=>{
控制台日志（“更新1”）；
};
渲染=（）=>(

{console.log（“呈现1”）}
{text}

);
}
类Text2扩展了React.PureComponent{
组件将卸载=（）=>{
控制台日志（“销毁2”）；
};
组件将更新=（）=>{
控制台日志（“更新2”）；
};
渲染=（）=>(

{console.log（“呈现2”）}
{text}

);
}
类Text3扩展了React.PureComponent{
组件将卸载=（）=>{
控制台日志（“销毁3”）；
};
组件将更新=（）=>{
控制台日志（“更新3”）；
};
渲染=（）=>(

{console.log（“呈现3”）}
{text}

);
}
render（，document.getElementById（“容器”）；

---

我希望这会有所帮助。

为什么不尝试将函数放入setTimeout中？请发布代码以更好地帮助您。编辑您的问题，并包含所有必要的信息，以获得一个最小、完整和可验证的示例。我添加了一个代码笔示例，说明我想对嵌套结构执行的操作，但要在此处发布（甚至在代码笔上发布）以使真正的用例可见，代码太多了：12个月，每个都有5-20个事件，每个活动也可以用一个由3个面板组成的内部手风琴折叠。@ThanveerShah您指的是哪个功能？那么您想一次单击打开所有面板吗？谢谢！我调整了你的沙盒：因此：1）我可以单击以展开/折叠手风琴并从选择中进行控制2）我可以控制销毁道具3）在第一次渲染时强制渲染所有三个面板。。。现在，我似乎没有得到销毁和渲染（即使开关处于打开状态），但我得到了整个组件的重新渲染，因为您使用的是“forceRender”，所以它没有销毁。无论如何，更新activeKey将始终重新呈现整个组件。最好的办法是避免重新渲染子组件（使用纯组件）。如果渲染中存在任何耗时超过3秒的重逻辑，请将其移动到其他位置。如果你真的想找个办法的话。使用纯css手风琴，我可以帮助更多，如果你能分享你的代码。非常感谢你的帮助和提供！我找到了一个使用shouldComponentUpdate（）和一次性forceRender的解决方案，以确保子组件在启动时可用，但不是在每次折叠/展开时都进行渲染…实际上，这个答案的第一行是我问题的一大部分：“它将渲染整个组件”。。。我可以强制渲染一次并避免在这里重新渲染整个树：但我仍然不满足于在我想要更改内部组件的状态时需要渲染整个组件。。。

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"));