在 React.js 中通过 createElement 向元素添加组件答案

【问题标题】：adding component to element made through createElement in React.js在 React.js 中通过 createElement 向元素添加组件
【发布时间】：2022-01-19 14:55:16
【问题描述】：

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

import LikeBtn from "./LikeBtn/LikeBtn";      

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

但结果是这样的： result

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>
    );
  }
}

这是我为每个项目添加响应按钮的最佳主意，所以除了我的问题，如果您有更好的方法，请告诉我。谢谢！

【问题讨论】：

在使用 React 时，您不应该为了简单地渲染元素而直接进行 DOM 操作。无意冒犯，但我认为您应该阅读他们的tutorial。
不要认为这有什么冒犯性...谢谢。

标签： javascript html css reactjs api

【解决方案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 函数来显示数据，here。编辑：不要忘记为每个孩子以及孩子中的每个元素添加一个键。

【讨论】：