Question

我正在构建一个递归可折叠组件，例如

-List1
 --List 1.1
 --List 1.2
 --List 1.3
  --List 1.3.1
  --List 1.3.2
-List2
 --List 2.1
 --List 2.2
 --List 2.3
  --List 2.3.1
  --List 2.3.2

如果已经打开任何标签，从JSON中我会得到expanded=1。

现在，我想对其应用Toggle功能以像Accordian一样打开和关闭它。

参考：http://prntscr.com/laowpp

我的组件代码如下：

class List extends React.Component {
  constructor(props) {
    super(props);
    this.recursiveItems = this.recursiveItems.bind(this);
    this.toggletab = this.toggletab.bind(this);
  }
  toggletab(event) {
    event.stopPropagation();
  }
  recursiveItems(t) {
    return (
      <li
        className={[
          t.expanded == 1 ? 'active' : '',
        ].join(' ')}
      >
        <NavLink to={t.url} className="list" >
          {t.title}
        </NavLink>
        {
          t.children &&
          <List tabData={t.children} className="child" />
        }
      </li>
    );
  }
  render() {
    const { tabData } = this.props;
    return (
      <ul>
        {
          tabData.map((item) => this.recursiveItems(item))
        }
      </ul>
    );
  }
}

Answer 1

如果状态没有变化，则除了类名之外，您还要做其他事情。您可以使用此方法来实现行为

 <li
  className={[t.expanded == 1 ? "active" : ""].join(" ")}
  onClick={e => {
    e.target.classList.toggle("active");
  }}
>
  <NavLink to={t.url} className="list">
    {t.title}
  </NavLink>
  {t.children && <List tabData={t.children} className="child" />}
</li>;

欢迎反馈

如何在ReactJS的递归组件中切换类onCLick？

1 个答案: