更改页面 HTML 按钮单击 React

Question

所以我已经用 JS/Jquery + HTML+ CSS [这里][1] 编写了一个堆排序动画。我们目前正在 React 中重建+扩展项目。我不知道（或一般的网络技术），到目前为止，我已经通过在 DS 上工作而我的合作伙伴负责特定的事情+动画。自从他也喜欢它以来，我已经获得了使用堆动画的绿灯。我一直在努力尝试将 HTML 文件集成到其中以做出反应。尝试 iframe、window.location 和其他 SO 东西对我没有用。这就是为什么我要在单击时尝试将 HTML 代码设置为我的 HTML 文件的方法。

目录结构为：

1. heap.js
   

2. 堆排序（目录）（从项目复制）：
   a)index.html
   b)静态（目录）：
   

    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

Answer 1

window.location 不会重定向到另一个页面。你必须使用 window.location.replace()

function create(){   
    window.location.replace("./heapsort/index.html")
}