时间戳

首页 > 解决方案 > 使用 React Js 访问了 div 上的状态/类而不是锚点

reactjs - 使用 React Js 访问了 div 上的状态/类而不是锚点

问题描述

我正在尝试通过使用状态在 Div 上添加已访问的状态/类，但遇到了一些问题。我无法使用锚点，所以我需要能够将它设置在一个类上。

这不是一个选项：

a:visited {
  ...
}

Codesandbox.io：https://codesandbox.io/s/l5x1l78mqz _

标签： reactjsstate

解决方案

您需要将此信息存储在某个状态变量中。您可以将其存储在 上BreadCrumb，但要做到这一点，您需要 (1) 使其成为一个类并 (2) 在调用之前本地处理其 click 函数onClickTabItem：

class BreadCrumb extends Component {
  constructor(props) {
    this.state = {visited: false}
  }

  render () {
    return (
      <li className={this.state.visited ? "visited" : ""} ... >
    );
  }
}

或者，您可以存储访问状态信息，SummaryBar以便您可以将访问状态作为道具传递，就像您正在尝试做的那样。为此，您需要一种数据结构，该结构允许您存储所有访问过的状态，而不仅仅是当前选择的状态。

state = { activeTab: 0, select: "" , visited: {}};

然后在 中handleClickTabItem，您更新了visited给定元素的 （您需要找出标题）

visited = this.state.visited;
visited[title] = true;
this.setState(visited: visited);

要弄清楚标题，最简单的方法可能是将其作为 arg 传递给单击处理程序BreadCrumb

onClick={() => onClickTabItem(title)}

Buttons然后，您可以在尝试执行此操作时在您的函数中使用它：

visited={this.state.visited[title]}

推荐阅读