react如何点击按钮动态渲染
在 React 中点击按钮动态渲染内容
动态渲染通常通过状态管理和条件渲染实现。以下是一个完整的实现方法：
使用 useState 管理渲染状态
import React, { useState } from 'react';
function DynamicRenderComponent() {
const [shouldRender, setShouldRender] = useState(false);
const toggleRender = () => {
setShouldRender(!shouldRender);
};
return (
<div>
<button onClick={toggleRender}>
{shouldRender ? '隐藏内容' : '显示内容'}
</button>
{shouldRender && <div>这是动态渲染的内容</div>}
</div>
);
}动态渲染不同组件
可以扩展为渲染不同的组件：
function MultiRenderComponent() {
const [renderType, setRenderType] = useState(null);
return (
<div>
<button onClick={() => setRenderType('A')}>渲染A</button>
<button onClick={() => setRenderType('B')}>渲染B</button>
{renderType === 'A' && <ComponentA />}
{renderType === 'B' && <ComponentB />}
</div>
);
}使用动态组件映射
对于更复杂的情况，可以使用对象映射：
const componentMap = {
a: ComponentA,
b: ComponentB,
c: ComponentC
};
function DynamicComponentRenderer() {
const [currentComponent, setCurrentComponent] = useState(null);
const ComponentToRender = componentMap[currentComponent];
return (
<div>
{Object.keys(componentMap).map(key => (
<button key={key} onClick={() => setCurrentComponent(key)}>
渲染{key.toUpperCase()}
</button>
))}
{ComponentToRender && <ComponentToRender />}
</div>
);
}带参数的动态渲染
需要传递参数给动态组件时：
function ParametricRender() {
const [renderConfig, setRenderConfig] = useState(null);
const renderWithParams = (type, params) => {
setRenderConfig({ type, params });
};
const getComponent = () => {
if (!renderConfig) return null;
switch (renderConfig.type) {
case 'user':
return <UserProfile data={renderConfig.params} />;
case 'product':
return <ProductDetail data={renderConfig.params} />;
default:
return null;
}
};
return (
<div>
<button onClick={() => renderWithParams('user', { id: 1 })}>
加载用户
</button>
<button onClick={() => renderWithParams('product', { id: 101 })}>
加载产品
</button>
{getComponent()}
</div>
);
}这些方法涵盖了从简单到复杂的动态渲染场景，可以根据具体需求选择适合的实现方式。关键点是利用React的状态管理来控制渲染逻辑，通过条件渲染或组件映射来显示不同的内容。
