在React Hooks中,可以使用useState来控制组件是否进行渲染。在按下按钮时,可以修改useState的值,从而触发组件的重新渲染。
下面是一个示例代码:
import React, { useState } from 'react';
function MyComponent() {
const [isRendered, setIsRendered] = useState(false);
const handleClick = () => {
setIsRendered(true);
};
return (
{isRendered && }
);
}
function RenderedComponent() {
// 渲染的组件内容
return 组件已渲染
;
}
export default MyComponent;
在上述代码中,我们使用useState来创建了一个名为isRendered的状态变量,并将其初始值设置为false。当按钮被点击时,调用handleClick函数来修改isRendered的值为true。在组件的返回值中,根据isRendered的值来决定是否渲染RenderedComponent组件。
这样,当按钮被按下时,RenderedComponent组件将会被渲染出来。
上一篇:按下按钮时播放闪光动画。
下一篇:按下按钮时创建/替换新窗口