[英]remove active state from react component
I'm pretty sure what I'm doing is considered an "anti-pattern".我很确定我正在做的事情被认为是“反模式”。 I just don't really know react all that well, and I haven't really used JS in any real way since around the time ECMA Script 6 was released.我只是不太了解反应这么好,而且自从 ECMA Script 6 发布以来,我还没有真正以任何实际方式使用过 JS。
Here's my "./js/component/header.js".这是我的“./js/component/header.js”。 Essentially, I want to turn off the blue of the "NavDropDown" after it's been clicked.本质上,我想在单击“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;
I'm doing my best to avoid managing the CSS directly, if I don't know JS all that well, I REALLY don't know CSS.我正在尽最大努力避免直接管理 CSS,如果我不太了解 JS,我真的不知道 CSS。 Is this an acceptable pattern?这是可接受的模式吗?
In react generally you don't want to access and edit the DOM directly, which is what you are doing with一般来说,您不想直接访问和编辑 DOM,这就是您正在做的事情
elem.target.classList.remove("active");
What you can do instead is use className prop.你可以做的是使用className道具。 You should create a string based on a state that holds the active eventKey.您应该基于包含活动 eventKey 的 state 创建一个字符串。
Take a look at a very similar case in the official docs: https://reactjs.org/docs/faq-styling.html看看官方文档中一个非常相似的案例: https://reactjs.org/docs/faq-styling.html
So this is a more react way:所以这是一种更反应的方式:
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>
)
}
Note that NavDropdown.Item component needs to accept the className prop and pass it to the actual html tag that needs to have it.请注意, NavDropdown.Item 组件需要接受 className 属性并将其传递给需要它的实际 html 标记。
I don't see anything fatally wrong with your example.我看不出你的例子有什么致命的错误。 I would however suggest that you use onClick instead of onSelect for better support.但是,我建议您使用 onClick 而不是 onSelect 以获得更好的支持。
If you would want to make your example a lot better, I would recommend that you get some sort of CSS-in-JS library: styled-components or emotion.sh.如果您想让您的示例变得更好,我建议您获取某种 CSS-in-JS 库:styled-components 或emotion.sh。 I have more experience with styled-components and would recommend styled-components.我对样式组件有更多经验,并会推荐样式组件。
You would be able to just remove the CSS based on React props usings styled-components because it literally just adds styling to a component.您可以使用 styled-components 基于 React 道具删除 CSS,因为它实际上只是为组件添加样式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.