时间戳

首页 > 解决方案 > 为什么 React 函数不重新调整 div？

javascript - 为什么 React 函数不重新调整 div？

问题描述

我没有在我的 dom 中获得 div。当我在浏览器中检查应用程序并返回两个console.logs但在#teams div中没有​​div时，有带有团队ID的div。:S

const Teams = () => {
  const homeTeam = [
    { position: 0, team: "home", visible: true, x: "30%", y: "30%" },
    { position: 1, team: "home", visible: true, x: "40%", y: "30%" },
  ];

  const awayTeam = [
    { position: 0, team: "away", visible: true, x: "70%", y: "70%" },
    { position: 1, team: "away", visible: true, x: "60%", y: "70%" },
  ];

  const setTeams = (home, away) => {
    const setPlayers = (team) => {
      team.map((player, index) => {
        console.log(player);
        return (
          <div className={`player ${player.team === "home" ? "home" : "away"}`} key={index}>
            {player.position === 0 ? "G" : null}
          </div>
        );
      });
    };

    setPlayers(home);
    setPlayers(away);
  };

  return <div id="teams">{setTeams(homeTeam, awayTeam)}</div>;
};

export default Teams;

标签： javascripthtmlreactjs

解决方案

你没有在你的setPlayers和setTeams函数中返回任何东西。您需要返回team.map，并且setPlayers像这样：

const setTeams = (home, away) => {
    return setPlayers = (team) => {
      return team.map((player, index) => {
        console.log(player);
        return (
          <div className={`player ${player.team === "home" ? "home" : "away"}`} key={index}>
            {player.position === 0 ? "G" : null}
          </div>
        );
      });
    };

推荐阅读