从反应组件中删除活动 state

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

一般来说，您不想直接访问和编辑 DOM，这就是您正在做的事情

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

你可以做的是使用className道具。 您应该基于包含活动 eventKey 的 state 创建一个字符串。

看看官方文档中一个非常相似的案例： 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 基于 React 道具删除 CSS，因为它实际上只是为组件添加样式。