Question

我正在尝试更改所选标签的背景颜色。问题是我必须在动态数据中添加动态类。

我尝试在代码中添加CSS类，但是此CSS将选择“我的所有标签”

{emailActivities.map((activity, i) => {
    return (
        <li
        key={i}
        className={this.state.reportView === false ? "active" : null}
        onClick={() => {

            this.setState({ reportView: false }, this.getReportByActivityId(activity.activityId))
        }}
        >
        {activity.activityTitle}

        </li>   

        )
    })
}

此代码将通过defalut选择我的所有值我只想突出显示“选定的选项卡”。怎么做。

Answer 1

您可以使用activityId来检查选定的标签。

{
  emailActivities.map((activity, i) => {
    return (
      <li
        key={i}
        className={this.state.activeTab === activity.activityId ? 'active' : null}
        onClick={() => {
          this.setState(
            { reportView: false, activeTab: activity.activityId },
            this.getReportByActivityId(activity.activityId)
          );
        }}
      >
        {activity.activityTitle}
      </li>
    );
  });
}

Answer 2

您需要设置reportView: false的状态，而不是设置activeTabName。

保持状态值

    this.state= {activeTabName:'set first tab name here for by default active'}

像这样添加动态类active，

    {emailActivities.map((activity, i) => {
        return (
            <li
            key={i}
            className={this.state.activeTabName=== activity.activityTitle? "active" : null}
            onClick={() => {

                this.setState({ activeTabName: activity.activityTitle}, this.getReportByActivityId(activity.activityId))
            }}
            >
            {activity.activityTitle}

            </li>   

            )
        })
    }

Answer 3

如果选项卡的数量固定为，则可以使用地图功能的键值来实现。或者，如果代码中的每个对象（例如activityId）中都有一个唯一的键，那么这样做很容易。在这种情况下，我认为reportView状态值没有用。

// initialize state
this.state={
    activeTabId: -1, //if you need to select one tab, you can init it by that's activityId
}
...
{emailActivities.map((activity, i) => {
    return (
        <li
        key={i}
        className={activity.activityId === this.state.activeTabId ? "active" : null}
        onClick={() => {
            this.setState({ activeTabId: activity.activityId };
            this.getReportByActivityId(activity.activityId));
        }}
        >
        {activity.activityTitle}

        </li>   

        )
    })
}

如果标签数是固定的，则可以轻松使用key选择第一个标签。

// initialize state
this.state={
    activeTabId: 0, // Select first tab.
}
...
{emailActivities.map((activity, key) => {
    return (
        <li
        key={key}
        className={key === this.state.activeTabId ? "active" : null}
        onClick={() => {
            this.setState({ activeTabId: key };
            this.getReportByActivityId(activity.activityId));
        }}
        >
        {activity.activityTitle}

        </li>   

        )
    })
}

更好的是，使用styled-component而不是更改className。有关更多详细信息，请检查。 React Styled Components Tutorial Styled Components Documentation

如何在选定选项卡上的React JS中动态添加类名

3 个答案: