从反应组件中删除活动状态

Question

我很确定我所做的被认为是“反模式”。我只是不太清楚反应有那么好，自从 ECMA Script 6 发布以来，我还没有真正以任何实际方式使用过 JS。

这是我的“./js/component/header.js”。本质上，我想在单击后关闭“NavDropDown”的蓝色。

import HeaderBehavior from '../behavior/header.js';

import React from 'react'
import {
  Nav,
  NavDropdown
} from 'react-bootstrap'

const Header = () => {
  const headerBehavior = new HeaderBehavior();
  const fileClick = (eventKey, elem) => {
    headerBehavior.file(eventKey);
    elem.target.classList.remove("active");
  };
    return (
    <Nav variant="fill">
      <NavDropdown title="File" onSelect={fileClick}>
        <NavDropdown.Item eventKey="new">New</NavDropdown.Item>
        <NavDropdown.Item eventKey="open">Open</NavDropdown.Item>
        <NavDropdown.Item eventKey="save">Save</NavDropdown.Item>
        <NavDropdown.Item eventKey="save_as">Save As</NavDropdown.Item>
      </NavDropdown>
    </Nav>
    )
}

export default Header;

我尽量避免直接管理 CSS，如果我不太了解 JS，我真的不知道 CSS。这是可接受的模式吗？

Answer 1

在 React 中，您通常不想直接访问和编辑 DOM，而这正是您正在使用的

elem.target.classList.remove("active");

你可以做的是使用 className 道具。您应该根据保存活动 eventKey 的状态创建一个字符串。

看看官方文档中一个非常相似的案例：https://reactjs.org/docs/faq-styling.html

所以这是一种更反应的方式：

const Header = () => {
  const headerBehavior = new HeaderBehavior();
  
  const [active, setActive] = useState();
  
  const fileClick = (eventKey, elem) => {
    headerBehavior.file(eventKey);
    setActive(eventKey);
  };
  
  const getClassName = (eventKey) => {
    return eventKey === active ? "active" : null;
  };
  
    return (
    <Nav variant="fill">
      <NavDropdown title="File" onSelect={fileClick}>
        <NavDropdown.Item className={getClassName("new")} eventKey="new">New</NavDropdown.Item>
        <NavDropdown.Item className={getClassName("open")} eventKey="open">Open</NavDropdown.Item>
        <NavDropdown.Item className={getClassName("save")} eventKey="save">Save</NavDropdown.Item>
        <NavDropdown.Item className={getClassName("save_as")} eventKey="save_as">Save As</NavDropdown.Item>
      </NavDropdown>
    </Nav>
    )
}

注意 NavDropdown.Item 组件需要接受 className 属性并将其传递给需要它的实际 html 标签。

Answer 2

我没有发现您的示例有任何致命错误。但是，我建议您使用 onClick 而不是 onSelect 以获得更好的支持。

如果您想让您的示例变得更好，我建议您使用某种 CSS-in-JS 库：styled-components 或 emotion.sh。我对 styled-components 有更多经验，会推荐 styled-components。

您可以使用样式组件删除基于 React 道具的 CSS，因为它实际上只是向组件添加样式。

从反应组件中删除活动状态

remove active state from react component

javascript

reactjs

react-bootstrap