在 React.js 的另一个组件中修改一个组件中的 HTML 元素

编程问答 2022-05-26

问题描述

我创建了 todoapp 并且我想创建一个按钮，当单击该按钮时，将修改列表以仅显示已完成的任务。 我有三个组成部分： App.js - 它是一个主要组件，TasksList.js - 负责显示任务（最初它显示所有任务），ListHandler - 我想在这里创建上述按钮。 我决定使用 useRef 能够在任何地方访问任务列表（在 TasksList 中使用类 tasksWrapper 的 ul）。 App.js：

import React,{ useState,useRef } from "react";

import "./sass/main.css";

import Header from "./components/Header";
import Browser from "./components/Browser";
import TasksList from "./components/TasksList";
import ListHandler from "./components/ListHandler";

function App() {
  //set default date for initial tasks
  let defaultDate = new Date().toTimeString();
  defaultDate = defaultDate.split(" ")[0];

  const [tasksList,setTasksList] = useState([
    {
      id: 0,content: "embrace Java",done: false,active: true,date: defaultDate,},{
      id: 1,content: "find a job in my dream industry",done: true,{
      id: 2,content: "win a war",]);

  const tasksListWrapper = useRef();

  return (
    <div className="App">
      <Header />
      <Browser tasksList={tasksList} />
      <TasksList
        tasksList={tasksList}
        setTasksList={setTasksList}
        tasksListWrapper={tasksListWrapper} />
      <ListHandler
        tasksList={tasksList}
        setTasksList={setTasksList}
        tasksListWrapper={tasksListWrapper} />
    </div>
  );
}

export default App;
TasksList.js 返回 JSX（displayTasks("all") 只为每个任务返回带有 task.content 的 :

return (
<section className="tasksList">
  <h2>LIST</h2>
  <ul ref={tasksListWrapper} className="tasksWrapper">{displayTasks("all")} 
  </ul>
</section>);

ListHandler 按钮和函数 displayDoneTasks 负责显示已完成的任务：

const displayDoneTasks = () => {
    const returnDoneTasks = () => {
      return tasksList.map((task) => {
        if (task.active && task.done) {
          return (
            <li
              key={task.id}
              className="task"
              id={task.id}
            >
              {task.content}
            </li>
          );
        } else return null;
      });
    };
    console.log(returnDoneTasks());
    tasksListWrapper.current.innerHTML = returnDoneTasks(); //if task.done === true then output is: {$$typeof: Symbol(react.element),type: "li",key: "0",ref: null,props: {…},…}
  }

  return (
    <section className="listHandler">
      >
      <button className="doneTasks" onClick={() => displayDoneTasks()}>
        Show only completed tasks
      </button>
      
    </section>
  );

为什么 {$$typeof: Symbol(react.element),…} 不显示为 HTML 元素？也许我的解决方案是错误的，我应该以不同的方式来做？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptreactjsreactjsuse-ref