按钮点击时在不同的容器中渲染组件
以下是一个示例代码，演示了如何在按钮点击时在不同的容器中渲染组件：
import React, { useState } from 'react';
const App = () => {
const [renderedComponent, setRenderedComponent] = useState(null);
const handleButtonClick = () => {
setRenderedComponent(Rendered Component);
};
return (
{renderedComponent}
);
};
export default App;
在这个示例中，我们使用了React的useState钩子来保存要渲染的组件。初始时，renderedComponent被设置为null，表示没有组件需要渲染。
当按钮被点击时，handleButtonClick函数会被触发。在函数内部，我们使用setRenderedComponent来更新renderedComponent的状态，将其设置为要渲染的组件。在这个例子中，我们简单地将一个
最后，在渲染的部分，我们在一个 这是一个简单的示例，你可以根据自己的需求进行修改和扩展。
上一篇：按钮点击时元素未被添加到div中
下一篇：按钮点击时执行的函数 renderedComponent。当按钮被点击时，该组件将被渲染到页面上。
相关内容