将组件添加到React.js中通过createElement创建的元素中

Question

我想向我的元素添加一个Like按钮，我通过从API调用创建元素的forEach添加该按钮。所以我导入了一个我作为组件制作的Like Button，并尝试将其添加到卡片中，如下所示：

import LikeBtn from "./LikeBtn/LikeBtn";      
const likeBtn = document.createElement("span");
likeBtn.className = "imgcards__like-btn";
likeBtn.innerHTML = LikeBtn;

但结果是这样的：结果

LikeBtn组件和代码的其余部分供参考：

import React from "react";
import { AiFillHeart, AiOutlineHeart } from "react-icons/ai";
const LikeBtn = () => {
let liked = this.props.liked || false;
let count = this.props.count || true;
let color = "lightcoral";
if (liked) {
return (
<span
class="likebtn__icon"
style={{ color: color }}
onClick={this.onClick}
>
<AiFillHeart />
{count ? count : ""}
</span>
);
} else {
return (
<span class="likebtn__icon" onClick={this.onClick}>
<AiOutlineHeart />
{count ? count : ""}
</span>
);
}
};
export default LikeBtn;

import React from "react";
import "./ImageCards.css";
import LikeBtn from "./LikeBtn/LikeBtn";
function populateList(items) {
items.forEach((item) => addItem(item));
}
function addItem(item) {
const card = document.createElement("div");
card.className = "imgcards__card";
const cardContent = document.createElement("div");
cardContent.className = "imgcards__card-content";
const title = document.createElement("h1");
title.className = "imgcards__title";
title.innerHTML = item.title;
const date = document.createElement("p");
date.className = "imgcards__date";
date.innerHTML = item.date;
const image = document.createElement("img");
image.className = "imgcards__image";
image.src = item.hdurl;
const likeBtn = document.createElement("span");
likeBtn.className = "imgcards__like-btn";
likeBtn.innerHTML = LikeBtn;
cardContent.appendChild(title);
cardContent.appendChild(date);
cardContent.appendChild(image);
cardContent.appendChild(likeBtn);
card.appendChild(cardContent);
document.getElementById("imgcards__cards-container").appendChild(card);
}
export default class ImageCards extends React.Component {
async componentDidMount() {
fetch(
"https://api.nasa.gov/planetary/apod?count=20&api_key=lwtGe8ifpAENLITuYZ0b1gqxkdhZux9u2OdvlfB4",
{
method: "GET",
headers: {
"content-type": "application/json",
},
}
)
.then((response) => response.json())
.then((data) => populateList(data));
}
render() {
return (
<div className="imgcards">
<div
className="imgcards__cards-container"
id="imgcards__cards-container"
></div>
</div>
);
}
}

这是我最好的主意，添加一个对每个项目都有响应的点赞按钮，所以除了我的问题之外，如果你有更好的方法，请告诉我。非常感谢。

Answer 1

避免Chris所说的直接DOM操作。关于您的案例，最好在项目列表中使用.map((。我根据您的API请求编写了一个快速示例，您可以开始使用它。见下文：

import React, {useState, useEffect} from "react";
import "./style.css";

export default function App() {
const [data, setData] = useState([])

useEffect(() => {
fetch(
"https://api.nasa.gov/planetary/apod?count=20&api_key=lwtGe8ifpAENLITuYZ0b1gqxkdhZux9u2OdvlfB4",
{
method: "GET",
headers: {
"content-type": "application/json",
},
}
)
.then((response) => response.json())
.then((data) => setData(data));
}, [])

return (
<div>
{data.map((item, index) => (

<div className="imgcards__title"> 
{
<li>{item.title}  {item.date}</li>
}
</div>

))
}
</div>

);
}

您还可以在.map((范围内添加您提到的类似按钮和其他html元素，并使用onClick((或其他功能应用您希望添加的任何逻辑。我建议阅读React文档，了解如何使用带有列表的map函数来显示数据。编辑：不要忘记为每个子项以及子项中的每个元素添加一个键。