javascript - 更改页面 HTML 按钮单击 React
问题描述
所以我已经用 JS/Jquery + HTML+ CSS [这里][1] 编写了一个堆排序动画。我们目前正在 React 中重建+扩展项目。我不知道(或一般的网络技术),到目前为止,我已经通过在 DS 上工作,而我的合作伙伴则负责响应特定的事情+动画。自从他也喜欢它以来,我已经获得了使用堆动画的绿灯。我一直在努力尝试将 HTML 文件集成到其中以做出反应。尝试 iframe、window.location 和其他 SO 东西对我没有用。这就是为什么我要在单击它时尝试将 HTML 代码设置为我的 HTML 文件的方法。
目录结构为:
堆.js
heapsort (dir) (从项目复制):
a)index.html
b)static (dir):i)styles.css <br> ii)style.css <br> iii)heaper.js (does the actual animation work) <br>
我想做一些事情,点击 heap.js 中的按钮将加载 index.html。如果可以正确加载,那么一切都应该顺利进行。
function create(){
//set HTML->./heapsort/index.html
window.location="./heapsort/index.html" //does not work despite going to the correct path
}
编辑:添加代码
Heap.js(除了 create 函数之外的所有东西都按预期工作)
import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
// import { Component } from 'react';
// import Page from './heapsort/index.html';
import VisualPage, {
About,
Complexity,
Controls,
ControlGroup,
Visualization,
} from '../VisualPage.js';
import './Styles/queue.css';
export function Heap(props) {
return (
<div className="heap">
{props.children}
</div>
);
}
export function QueueNode(props) {
return (
<CSSTransition
appear
in={props.show}
onExited={props.onExited}
timeout={200}
unmountOnExit
classNames="queue-node"
>
<div className={"queue-node" + (props.highlight ? " highlight" : "")}>
{props.children}
</div>
</CSSTransition>
);
}
function Demo() {
const [list, setList] = useState([]);
const [length, setLength] = useState(0);
function onExited() {
setList(list.slice(1));
}
function create(){
//set HTML->./heapsort/index.html
// window.location="./heapsort/index.html" //does not work despite going to the correct path
window.location.replace("./heapsort/index.html")
}
return (
<>
<Controls>
<ControlGroup>
<label htmlFor="create">Len of randomized array</label>
<input name="add" type="text" onChange={e => setLength(e.target.value)}></input>
<button onClick={create}>Create Array</button>
</ControlGroup>
</Controls>
<Visualization>
<Heap>
{list.map((node, i) => {
return (
<QueueNode
key={i}
index={i}
show={node.show}
highlight={node.highlight}
onExited={onExited}
>
{node.value}
</QueueNode>
);
})}
</Heap>
</Visualization>
</>
);
}
export default function QueuePage(props) {
return (
<VisualPage title="Array">
<About>
<h4>What is a Heap?</h4>
The bane of my existance.
</About>
<Complexity complexity={[
{
"name": "Indexing",
"complexity": "Θ(1)"
},
{
"name": "Set Element at Index",
"complexity": "Θ(1)"
},
{
"name": "Average wasted space",
"complexity": "Θ(1)",
},
]} />
<Demo />
</VisualPage>
);
}
```<br>
Index.html
-->
<input type="number" id="len" placeholder="Insert length of randomized array"></input>
<button id="click">Generate Arr of Length</button>
<button id="Refresh" onclick="refresh()">Refresh</button>
var myLink = document.getElementById('click'); 函数刷新(){ location.reload();} myLink.onclick = function () { var script = document.createElement("script"); script.type = "文本/javascript"; script.src = "./static/heap.js"; document.getElementsByTagName("head")[0].appendChild(script); 返回假;} ``` [1]: https://dl1683.github.io/DataStructuresInJavaScript/ds/heapsort/index.html
解决方案
window.location
不会重定向到另一个页面。你必须使用
window.location.replace()
function create(){
window.location.replace("./heapsort/index.html")
}
推荐阅读
- node.js - 如何在 Express.js 应用程序中使用 Reveal.js?
- javascript - 在组件的根目录中提供服务时如何监视服务方法
- python - PyInstaller 和 Google Vision - 转换时出错
- vue.js - 如何访问计算的状态变量?
- php - 如何使用 2 个特定键的值对多维数组进行排序
- sql - 从每个产品类别购物的客户;他们在 SQL Server 项目中平均购买了多少产品类别?
- security - Microsoft Graph - 如何使用安全警报“文件删除量异常”获取关联文件
- java - 工具栏在创建时自动显示后退箭头
- azure - Azure 应用程序网关 ARM 模板问题与 backendHttpSettingsCollection 中的 pickHostNameFromBackendAddress 和主机名
- angular - Dockerized Angular前端无法访问dockerized python后端