Question

我正在处理任务列表反应页面。我创建了一个名为“任务”的不同元素。下面是Task.js的代码，CompletedTask.js也有一些类似的代码。

import React,{useState} from 'react'
import Checkbox from '@material-ui/core/Checkbox';
import CompletedTask from './CompletedTask.js';

export default function Task(props){
    const task_text = props.text;

    const complete_text = useState({task_text});

    const taskComplete = (event) => {
        event.preventDefault();
        let doneTask = document.getElementById('done-task-list')

        let new_done_task = document.createElement( <CompletedTask text={complete_text} />);

        doneTask.appendChild(new_done_task);
    }

    return (
        <>
            <Checkbox
                    defaultChecked={false}
                    color="default"
                    inputProps={{ 'aria-label': 'checkbox with default color' }}
                    onClick={taskComplete}
            />
            {task_text}
        </>
    )
}

CompleteTask 是我构建的另一个反应元素，它的作用是禁用复选框并且文本颜色不同。我无法将此 CompleteTask 元素附加到我的 div 的末尾（ID 为“done-task”）。错误在于使用 document.createElement。有没有其他方法可以附加我自己创建的元素？

Answer 1

您不应该使用 DOM 操作来执行此操作，并且您没有正确使用 useState。我会做这样的事情：

import React, { useState } from "react";
import Checkbox from "@material-ui/core/Checkbox";
import CompletedTask from "./CompletedTask.js";

export default function Task(props) {
  const task_text = props.text;

  const [complete, setComplete] = useState(false);

  const taskComplete = () => {
    // do anything else you need to complete the task
    setComplete(true); //will mark your checkbox as checked and show the completed task component
  };

  return (
    <>
      <Checkbox
        defaultChecked={complete}
        color="default"
        inputProps={{ "aria-label": "checkbox with default color" }}
        onClick={taskComplete}
      />
      {complete && <CompletedTask text={task_text} />}
    </>
  );
}

Answer 2

react 元素与 DOM 元素不同，它们应该转换为 DOM 元素并使用 React.createElement() 注入页面。我是新手，但建议在组件中使用您的组件：：()（在 return 语句中）并使用逻辑渲染来显示（如果有）

如何添加我们自己的反应元素？

2 个答案: