react如何点击按钮动态渲染
动态渲染的实现方法
在React中，通过点击按钮动态渲染内容通常需要结合状态管理（useState）和事件处理。以下是几种常见场景的实现方式：
条件渲染组件
通过状态控制是否渲染特定组件：
import React, { useState } from 'react';
function DynamicComponent() {
const [showContent, setShowContent] = useState(false);
return (
<div>
<button onClick={() => setShowContent(!showContent)}>
Toggle Content
</button>
{showContent && <div>动态渲染的内容</div>}
</div>
);
}动态加载不同组件
根据状态值渲染不同的组件：
function ComponentA() { return <div>组件A</div>; }
function ComponentB() { return <div>组件B</div>; }
function App() {
const [currentComponent, setCurrentComponent] = useState('A');
return (
<div>
<button onClick={() => setCurrentComponent('A')}>显示A</button>
<button onClick={() => setCurrentComponent('B')}>显示B</button>
{currentComponent === 'A' ? <ComponentA /> : <ComponentB />}
</div>
);
}动态列表渲染
点击按钮添加/删除列表项：
function ListRenderer() {
const [items, setItems] = useState([]);
const addItem = () => {
setItems([...items, `Item ${items.length + 1}`]);
};
const removeItem = () => {
setItems(items.slice(0, -1));
};
return (
<div>
<button onClick={addItem}>添加项目</button>
<button onClick={removeItem}>删除项目</button>
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
}异步加载组件
配合React.lazy实现动态组件加载：
import React, { Suspense, useState } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
const [showLazy, setShowLazy] = useState(false);
return (
<div>
<button onClick={() => setShowLazy(true)}>加载组件</button>
<Suspense fallback={<div>加载中...</div>}>
{showLazy && <LazyComponent />}
</Suspense>
</div>
);
}动态表单字段渲染
根据用户输入动态生成表单字段：
function DynamicForm() {
const [fields, setFields] = useState([{ id: 1, value: '' }]);
const addField = () => {
setFields([...fields, { id: Date.now(), value: '' }]);
};
const removeField = (id) => {
setFields(fields.filter(field => field.id !== id));
};
return (
<form>
{fields.map(field => (
<div key={field.id}>
<input type="text" />
<button type="button" onClick={() => removeField(field.id)}>
删除
</button>
</div>
))}
<button type="button" onClick={addField}>添加字段</button>
</form>
);
}性能优化建议
对于频繁更新的动态渲染，考虑使用React.memo优化组件性能：
const MemoizedComponent = React.memo(function MyComponent({ data }) {
return <div>{data}</div>;
});动态渲染的核心在于通过状态变化驱动UI更新，结合React的声明式特性可以高效实现各种交互需求。
