Question

我很确定我正在做的事情被认为是“反模式”。我只是不太了解 React，而且自从 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 删除基于 React props 的 CSS，因为它实际上只是为组件添加样式。

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

2 个答案: