如何访问 refs 数组元素

Question

My class is tabs container. the li element displaying each tab.I am using refs array to identify list elements and to set and unset the active tab by adding and removing 'tab-list-active' class.I am using react version 16.13.1

Tab

import React, { createRef } from "react";
import {
  MapTo,
  withComponentMappingContext,
  ResponsiveGrid,
} from "@adobe/cq-react-editable-components";

import Tab from "./Tab";
require("./Tabs.css");

const TabsContainerEditConfig = {
  emptyLabel: "Tabs",

  isEmpty: function (props) {
    return !props;
  },
};

export default class TabsContainer extends ResponsiveGrid {
  activeTabRef = this.props.columns.map((x) => createRef(null));

  get containerProps() {
    let containerProps = super.containerProps;
    containerProps.className =
      (containerProps.className || "") + " aem-Grid " + this.props.gridClassNames;
    return containerProps;
  }

  render() {
    if (this.props.columns.length == 0 || !this.props.columns[0].title) {
      return (
        <div {...this.containerProps}>
          {super.childComponents}
          {super.placeholderComponent}
        </div>
      );
    } else {
      let activeTab = "";
      if (this.props.columns[0].title) activeTab = this.props.columns[0].title;

      return (
        <div className="tabs">
          <div {...this.containerProps}>
            <ol className="tab-list">
              {this.props.columns.map((child, id) => {
                let className = "tab-list-item";
                if (activeTab === child.id) {
                  className += " tab-list-active";
                }
                return (
                  <li
                    ref={(el) => (this.activeTabRef[child.id] = el)}
                    key={id}
                    onClick={() => {
                      let prevActiveTab = activeTab;
                      activeTab = child.id;
                      this.activeTabRef[prevActiveTab].current.classList.remove(
                        "tab-list-active",
                      );
                      this.activeTabRef[activeTab].current.classList.add("tab-list-active");
                    }}
                    className={className}
                  >
                    {child.title}
                  </li>
                );
              })}
            </ol>
            <div className="tab-content">
              {this.props.columns.map((child, id) => {
                if (child.id !== activeTab) return undefined;
                return (
                  <div id={child.id} key={id}>
                    {this.childComponents}
                    {this.placeholderComponent}
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      );
    }
  }
}

MapTo("tabscontainer")(withComponentMappingContext(TabsContainer), TabsContainerEditConfig);

When I click on the list Tab I get error I am getting error. I did not understand how to add and remove class using refs array for particular index.

Uncaught TypeError: Cannot read property 'classList' of undefined at onClick

Answer 1

As my comment says: don't use refs, just make the active tab a part of the Tabs component's state:

export default class TabsContainer extends ResponsiveGrid {
  constructor(props) {
    super(props);
    const activeTab =
      props.columns && props.columns[0] && props.columns[0].title
        ? props.columns[0].title
        : "";
    this.state = { activeTab };
  }

  get containerProps() {
    let containerProps = super.containerProps;
    containerProps.className =
      (containerProps.className || "") + " aem-Grid " + this.props.gridClassNames;
    return containerProps;
  }

  renderTabBar(columns, activeTab) {
    return (
      <ol className="tab-list">
        {columns.map((child, id) => {
          let className = "tab-list-item";
          if (activeTab === child.id) {
            className += " tab-list-active";
          }
          return (
            <li
              key={id}
              onClick={() => this.setState({ activeTab: child.id })}
              className={className}
            >
              {child.title}
            </li>
          );
        })}
      </ol>
    );
  }

  renderContent(columns, activeTab) {
    return (
      <div className="tab-content">
        {columns.map((child, id) => {
          if (child.id !== activeTab) return undefined;
          return (
            <div id={child.id} key={id}>
              {this.childComponents}
              {this.placeholderComponent}
            </div>
          );
        })}
      </div>
    );
  }

  render() {
    const { columns } = this.props;
    const { activeTab } = this.state;
    if (columns.length === 0 || !columns[0].title) {
      return (
        <div {...this.containerProps}>
          {this.childComponents}
          {this.placeholderComponent}
        </div>
      );
    }
    return (
      <div className="tabs">
        <div {...this.containerProps}>
          {this.renderTabBar(columns, activeTab)}
          {this.renderContent(columns, activeTab)}
        </div>
      </div>
    );
  }
}