切换具有状态的 CSS 类 [关闭]答案

【问题标题】：Switch CSS classes with state [closed]切换具有状态的 CSS 类 [关闭]
【发布时间】：2018-11-19 19:43:38
【问题描述】：

我目前正在使用 React 创建一个登录/注册模板，该模板在功能上模仿 groupon login。具体来说，我的目标是在i have an account 和i'm a new customer 之间切换时切换彩色边框。该模板在当今的开发中非常普遍，我见过许多编码不佳的解决方案，它们完全忽略了最佳实践。

我将首先说明最佳解决方案使用state。然后我会创建以下内容（显然不完整）：

<div className="wrapper">
  <div className="login" />
  <div className="register" />
</div>

然后我想给两个 div 一个状态和一个边框底部规范来渲染彩色边框。我看到的问题是如何最好地实现哪个处于活动状态的切换。

另一个思想实验是将所有内容硬编码到输入字段。然后，当用户点击I'M A NEW CUSTOMER 字段时，我所要做的就是为该组件设置一个活动状态，然后渲染。

同样，这个问题的重点是回答如何最好地实施这个登录/注册表单。顺便说一句，Groupon 给他们的展示组件一个 active 类。

编辑：正如 Sunny Wong 所指出的，并反映了我的假设，他的解决方案使用状态并通过我的组件实现如下：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeTab: "login"
    };
  }

  handleActiveTab = name => event => {
    this.setState({ activeTab: name });
  };

  render() {
    const { activeTab } = this.state;
    let joinComponent =
      activeTab === "login" ? <LoginComponent /> : <RegisterComponent />;

    return (
      <div className="wrapper">
        <div
          onClick={this.handleActiveTab("login")}
          className={classNames("login", {
            active: activeTab === "login"
          })}
        >
          Login
        </div>
        <div
          onClick={this.handleActiveTab("register")}
          className={classNames("register", {
            active: activeTab === "register"
          })}
        >
          Register
        </div>
        {joinComponent}
      </div>
    );
  }
}

此外，该帖子被标记为too broad，但我针对的是特定主题/问题。总而言之，它们是：

具体来说，我的目标是切换彩色边框在我有帐户和我是新客户之间切换。

回答如何最好地实施此登录/注册表

请参阅live version 以获取更多参考。

【问题讨论】：

标签： javascript css reactjs state

【解决方案1】：

切换类是去这里的方式。无需将选项卡重新渲染为不同的组件，因为内容相同。标签仅进行外观更改。有一个名为 classNames (https://www.npmjs.com/package/classnames) 的库，它非常有助于控制在给定情况下应用哪些类。

类似于通过 id 保持哪个链接处于活动状态的状态。然后切换一个负责应用活动样式的“活动”类。

state = { activeTab: 'login' }

handleActiveTab = e => {
  //sets state of activeTab
}

render() {
  const { activeTab } = this.state;
  return (
    <div className="wrapper">
      <div onClick={this.handleActiveTab} className={classNames('login', { active: activeTab === 'login' })} />
      <div onClick={this.handleActiveTab} className={classNames('register', { active: activeTab === 'register' })} />
    </div>
  );
}

【讨论】：

这太好了，谢谢你的回答。我编辑了原件以反映我的实施。我遇到的一个问题是，如果我不使用 double 函数指定 handleActiveTab = name => event => {}，我会得到一个无限循环（请参阅 handleActiveTab = name => {}）。知道为什么吗？
因为您在组件呈现时调用 onClick 处理程序上的函数。该函数还调用 setState 导致渲染，这将再次调用该函数。您做了正确的事情来防止无限循环，但引入了被认为是反模式的东西，因为第二个函数是匿名的。每次重新渲染时，都会创建一个新函数，react 没有引用。我相信你可以通过谷歌搜索 react-antipatterns 找到资源。我不认为这是一个瓶颈，除非你使用这个组件来渲染数百个标签。

【解决方案2】：

    <div className="wrapper">
  <div className={`login ${this.state.active==CONST.LOGIN? 'active':''}`} onClick={e=>{this.setState({active:CONST.LOGIN}}/>
  <div className={`register ${this.state.active==CONST.REGISTER? 'active':''}`} onClick={e=>{this.setState({active:CONST.REGISTER}} />
</div>

您必须在活动中保持活动状态，这将允许您加载正确的组件（登录/注册）。 CONST.LOGIN 和 CONST.REGISTER 是您必须管理的常量。你可以只使用 1/2 的脏方法。

【讨论】：