Question

我试图建立一个带有搜索框来显示我的项目的网站，以过滤项目... 所以我用它来反应，代码结果在这里

mf <- function(x){
  mefa4::Melt(x)
}

df <- function(x){
  data.frame(rows=rownames(x)[row(x)],cols=colnames(x)[col(x)],value=as.numeric(x))
}

rs <- function(x){
  reshape2::melt(Matrix::as.matrix(x))
}

microbenchmark::microbenchmark(df(m))
Unit: microseconds
  expr     min      lq     mean  median      uq      max neval
 df(m) 330.378 376.887 778.3489 476.903 699.743 14953.47   100

microbenchmark::microbenchmark(rs(m))
Unit: microseconds
  expr     min      lq     mean  median       uq     max neval
 rs(m) 537.328 638.683 1197.268 726.679 1042.261 15073.3   100

microbenchmark::microbenchmark(mf(m))
Unit: microseconds
  expr     min       lq     mean   median       uq      max neval
 mf(m) 459.947 526.6585 1023.575 677.9775 1007.214 6712.497   100

我定义了诸如项目，标题，滚动等内容问题出在dom

该页面最初显示的很完美，但是后来当我尝试搜索某些内容并单击“搜索”按钮时。它通过private static Student[] readData(String filename);函数，在该函数中我没有收到任何错误，但没有任何更改！项目页面保持不变，并且没有控制台错误，因此我尝试使用console.log并执行以下import java.io.*; import java.io.File; import java.util.Scanner; class Main{ public static void main(String[] args) { String []text = readData("students.txt"); for(int i = 0; i<text.length; i++){ System.out.println(text[i]); } } private static Student[] readData(String filename){ String[] data = ""; try{ File myObj = new File(filename); Scanner myReader = new Scanner(myObj); while(myReader.hasNextLine()){ data =myReader.nextLine(); System.out.println(data); } }catch (FileNotFoundException e){ System.out.println("Error"); e.printStackTrace(); } return data; } }，但我无法定义，这很尴尬。因为在这些年中，我使用了相同的符号，并且没有被定义。

然后在某人说我使用class ProjectPage extends React.Component{ render(){ let projectTab = projects.map(x => <Project project={x}/>); function search(){ let search = document.getElementById('search-input').value; let resultElement = document.getElementById('projects'); let searchProjects = projects.filter(x => x.name.toLowerCase().includes(search.toLowerCase())); if(!searchProjects.length) return resultElement.innerHtml = `No projects found with provided search!`; resultElement.innerHtml = renderToString(searchProjects.map(x => <Project project={x}/>)); }; return <> <title>Projects</title> <Header></Header> <Scroll/> <div style={{ marginTop: '40px' }}> <h1 style={{ textAlign: 'center' }}>Projects</h1> <div style={{ padding: '30px' }}> <div className="input-group mb-3"> <input type="text" className="form-control" placeholder="Your search input here..." id="search-input"/> <div className="input-group-append"> <a className="btn btn-outline-secondary" type="button" id="search-button" onClick={search}>Search</a> </div> </div> </div> <div style={{ padding: '30px', marginTop: '-30px' }}> <div className="row" id="projects">{projectTab}</div> </div> </div> </> }; };之后，我将搜索功能更改为

search()

再次出现一个问题，该问题显示为字符串而不是html，因此人们说使用document.getElementById('projects').innerHtml，但未定义它。现在我很困惑。我发现反应有什么答案吗？但是什么都没有。但是，如果您能找到答案，请回复。谢谢

Answer 1

这完全是对React的错误使用。您不能直接在代码中访问HTML dom元素。您正在使用React虚拟dom。您将需要重新组织代码以使其具有维护项目列表的状态。根据状态，您应该重新渲染“项目”组件。当您搜索某些内容时，您将更新状态，它会自动重新呈现“项目”组件。

在反应中'innerHtml'未定义

1 个答案: