如何使用React访问DOM-Elements

Question

我有一个Navigation-Component包含3个子组件:

NavigationHeaderNavigationListNavigationBtn

在navigationbtn - element我有一个按钮，我想在其上添加事件监听器:onClick={btnClickHandler}

这个<<p> strong> Clickhandler 应该可以访问NavigationLists-DOM-Elements并设置属性:display: hiddenattribute.

我读过，这是不好的做法选择任何dom元素在反应与getElementsById/ClassName和使用'useRef'相反。

但我不确定如何实现这一点!

谢谢你的帮助!

Answer 1

可以通过状态管理来实现。在父组件中创建一个函数，将状态更改为"true";和"false".

const [show, setshow] = useState(false);
const showFunction = () => {
setshow(!show)
};

给你的Btn组件一个引用(作为props发送)。并在按钮处理程序中调用这个函数;

const btnClickHandler = () => {
props.stateFunction()
};

并将此状态作为props发送给其他子组件。并在HTML元素中使用此状态作为布尔属性。

display:`${props.show ? "none" : ""}`