Question

我正在尝试使用钩子将较旧的类组件转换为功能组件，并使其部分完成，但遇到了障碍。基本上，我希望创建一个最新的组件，该组件具有原始组件的功能（一次只允许“打开”一个，默认情况下将第一个子项呈现为打开状态）。想知道是否有人能够看看我可能会遗漏什么/我如何更好地改进这一点。我一直在使用 React 钩子，但对类组件的了解并不多。

原始组件： https://codesandbox.io/s/62p6r3kqxz?file=/index.js

新组件： https://codesandbox.io/s/accordion-mo6cr

看起来我的组件在这一行出现故障：

timeout = setTimeout(() => {
    nodes[idx].ref.children[1].style.height = "auto";

这是有道理的，因为我认为我没有正确设置节点，进一步向下，这里：

  nodes = React.Children.map(children, (child, idx) => (
    <div
      key={idx}
      ref={(div) => {
        nodes[idx] = { ref: div };
      }}
      className={index === idx ? openClassName : ""}
    >
      <div onClick={() => toggle(idx, true)}>{child.props["data-header"]}</div>
      <div style={{ ...style, height: getHeight(idx) }}>{child}</div>
    </div>
  ));

我想替换 React.Children.map，但我不确定如何继续重构整个部分。

任何提示将不胜感激，谢谢！

使用钩子将类组件转换为组件

0 个答案: