我有一个显示按钮列表和相应 iframe 组件的网页。每次单击新按钮时,都会显示一个新的 iframe,并删除现有的 iframe。
这是 iframe 组件:
const IframeComp = ({ button }) => {
return (
<iframe src={button}></iframe>
)
}
export default IframeComp
我正在将所有可能的 iframe(作为字符串)加载到 app.jsx
中的列表中当应用程序像这样加载时: const [iframeComponents, setIframeComponents] = useState()
useEffect(() => {
function loadIframes() {
let iframes = {}
for (const iframeUrl of constants.buttonUrls) {
const iframe = `<IframeComp button=${iframeUrl}></IframeComp>`
iframes[iframeUrl] = iframe
}
setIframeComponents(iframes)
}
loadIframes()
}, []);
并通过 iframeComponents
到 iframe 显示页面文件,该文件检查按下哪个按钮并呈现适当的 iframe。当然,iframe 现在正在呈现为字符串。 有没有办法将 app.jsx 中的这些 IframeComp 组件加载/渲染为实际组件/html,将它们存储在列表中,然后根据按钮单击在下游简单地显示它们?
或者,我尝试使用
html-react-parser
库以在 iframe 显示页面文件中将字符串简单地呈现为 html,但这不起作用,因为它将字符串小写,并且它们还必须花费时间来呈现每个按钮单击。
最佳答案
为什么不直接使用组件?
const [iframeComponents, setIframeComponents] = useState();
useEffect(() => {
function loadIframes() {
let iframes = {};
for (const iframeUrl of constants.buttonUrls) {
const iframe = <IframeComp button={iframeUrl}></IframeComp>;
iframes[iframeUrl] = iframe;
}
setIframeComponents(iframes);
}
loadIframes();
}, []);
您通过按钮更改 iframe 的实际代码是什么?
关于javascript - 将组件保存到列表中,然后有条件地渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70102056/