如何添加我们自己的react元素？
如何添加我们自己的react元素？
提问于 2021-07-15 02:11:17
我正在处理一个任务列表react页面。我创建了一个名为"Task“的不同元素。下面的代码是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是我构建的另一个react元素，它的作用是禁用复选框，并且文本颜色不同。我无法将这个任务元素附加到我的div的末尾( id为‘CompleteTask -task’)。错误与使用document.createElement有关。有没有其他方法可以附加我自己创建的元素？
回答 2
Stack Overflow用户
发布于 2021-07-15 02:23:46
您不应该使用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} />}
</>
);
}Stack Overflow用户
发布于 2021-07-15 02:26:14
react元素不同于DOM元素，它们应该转换为DOM元素并使用React.createElement()注入到页面。我是个新手，但建议使用您的组件: in component:() (在return语句中)，并使用逻辑呈现来显示是否有这样的组件
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68383189
复制相关文章
相似问题
腾讯云开发者
