reactjs - 如何通过单击按钮动态设置组件。(反应)
问题描述
我想在单击菜单中的不同按钮时动态显示组件。例如,我的菜单栏左侧有带有按钮的菜单,右侧有相应的组件。
当我点击按钮时,它会将按钮的名称设置为一个状态,并使用这个状态来调用相应的组件。下面是我的代码。我想摆脱“const dynamicComponent 函数”并使用更简单的方法来使用字符串调用组件。
例如,如果我单击 displayNone 按钮并设置 DisplayNone 的状态。我想用它来调用而没有单独的函数。这应该适用于所有不同的按钮。有没有办法做到这一点?
APP代码
import {
Sidebar,
SidebarDemo,
DisplayNone,
Gsap,
GsapScrollMagic,
GoogleMaps,
ClipImage,
LinearGradient,
ButtonActive,
ExportFunction,
Axios,
Telephone,
MailTo,
InputSearch,
MapFilter,
ColumnSize,
} from "./components";
function App() {
const [comp, setComp] = useState("");
const handleClick = (name) => {
setComp(name);
};
const dynamicComponent = () => {
switch (comp) {
case "DisplayNone":
return <DisplayNone />;
case "Gsap":
return <Gsap />;
case "Gsap & ScrollMagic":
return <GsapScrollMagic />;
case "GoogleMaps":
return <GoogleMaps />;
case "Clip Image":
return <ClipImage />;
case "Linear Gradient":
return <LinearGradient />;
case "Button Active":
return <ButtonActive />;
case "Sidebar":
return <Sidebar />;
case "Export Function":
return <ExportFunction />;
case "Axios":
return <Axios />;
case "Telephone":
return <Telephone />;
case "Mail To":
return <MailTo />;
case "Input Search":
return <InputSearch />;
case "Map & Filter & Sort & Clone":
return <MapFilter />;
case "Column Size":
return <ColumnSize />;
default:
return <Axios />;
}
};
return (
<div className="App">
<Container fluid className="no-padding">
<Row>
<Col xs={3}>
<SidebarDemo handleClick={handleClick} />
</Col>
<Col className="comp no-padding">{dynamicComponent()}</Col>
</Row>
</Container>
</div>
);
}
侧边栏代码
import React, { useState } from "react";
import Data from "../../Data.json";
const SidebarDemo = ({ handleClick }) => {
const [clickedName, setClickedName] = useState("");
const [query, setQuery] = useState("");
const makeActive = (name) => {
handleClick(name);
setClickedName(name);
};
const modifiedData = Data.filter((item) => {
return item.toLowerCase().includes(query.toLowerCase()) ? item : null;
});
const sortedData = modifiedData.sort((a, b) => a.localeCompare(b));
return (
<div className="flex-column align-items-center sidebar">
<br />
<h4>Damon's Library</h4>
<br />
<input
type="text"
placeholder="Search.."
className="sidebar-input-box"
onChange={(e) => setQuery(e.target.value)}
value={query}
/>
<br />
<div className="mr-auto flex-column button-bar">
{sortedData.map((data, i) => (
<span
className={"sidebar-button" + (data === clickedName ? " button-active" : "")}
key={i}
onClick={() => makeActive(data)}>
{data}
</span>
))}
</div>
</div>
);
};
export default SidebarDemo;
Data.json 包含 [Item1, Item2, Item3, ...]
解决方案
一种解决方法可以是这样,
第一次导入所有组件(非解构)
import * as AllComponents from "./components";
然后创建一个新变量,该变量提取具有动态名称的确切组件,
const DynamicComponent = AllComponents[comp]
然后渲染那个 Dynamic 组件
<DynamicComponent />
推荐阅读
- php - JQuery、AJAX、PHP 传递大量数据导致报错
- image - 如何使用 java 从 GCP 存储桶中检索或显示图像(使用图像的 URL)?
- c++ - `__declspec(novtable)` 没用吗?
- python - 将当前列名更改为行并替换为其他列名
- javascript - 使用 prefers-reduced-motion 禁用动画
- botframework - 包含 qnaid 和上下文的机器人卡片如何表现得像 QnA 测试?
- java - 我无法从另一个 android 应用程序启动一个 android 应用程序。该怎么办?
- java - 如果有任何默认的 aws 类必须对所有事件映射?
- reactjs - 无法在 React js 中使用 console.log 打印属性
- c# - 在实体框架中使用lambra表达式优化查询