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

【问题标题】：How to add our own react element?如何添加我们自己的反应元素？
【发布时间】：2021-09-23 17:37:52
【问题描述】：

我正在处理任务列表反应页面。我创建了一个名为“任务”的不同元素。下面是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。有没有其他方法可以附加我自己创建的元素？

【问题讨论】：

在使用 React 时，您不应该使用直接的 DOM 操作方法（如 document.createElement）——将 DOM 视为应用程序状态的副作用是很有用的。 taskComplete应该设置一个状态变量，组件模板可以读取该状态变量来控制是否显示CompleteTask。
这能回答你的问题吗？ Show or hide element in React

标签： javascript html css node.js reactjs

【解决方案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} />}
    </>
  );
}

【讨论】：

【解决方案2】：

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

【讨论】：