为什么我在返回函数中收到此错误？

Question

这是我的代码：

    export default function Mio() {
      const app = document.getElementById("app");
      const Avatar = (params) => {
        const src = `https://randomuser.me/api/portraits/women/${params.id}.jpg`;
        return `
        <div>
          </br>
          <picture>
            <img src="${src}" />
            ${params.name}
          </picture>
        </div>
        `;
      };
      return (
        <div class="box01" style="background:rgba(0, 0, 0, 1)">
        <div class="box02" style="background:rgba(50, 255, 0, 0.70)">
          <center><h1>Desarrolladoras</h1></center>
          <center><h2>Android</h2></center>
          <center>
            Avatar({ id: 1, name: "Andrea" })
            Avatar({ id: 2, name: "Miluska" })
          </center>
        </div>
        <div class="box03" style="background:rgba(50, 0, 255, 0.70)">
          <center><h1>Desarrolladoras</h1></center>
          <center><h2>iOS</h2></center>
          <center>
            Avatar({ id: 3, name: "Raida" })
            Avatar({ id: 4, name: "Tania" })
          </center>
        </div>
      </div>
      );
    }

那显示错误。 但是当我运行这段代码时，用这个替换返回函数：

    app.innerHTML = `
        <div class="box01" style="background:rgba(0, 0, 0, 1)">
        <div class="box02" style="background:rgba(50, 255, 0, 0.70)">
          <center><h1>Desarrolladoras</h1></center>
          <center><h2>Android</h2></center>
          <center>` +
            Avatar({ id: 1, name: "Andrea" }) +
            Avatar({ id: 2, name: "Miluska" }) +
          `</center>
        </div>
        <div class="box03" style="background:rgba(50, 0, 255, 0.70)">
          <center><h1>Desarrolladoras</h1></center>
          <center><h2>iOS</h2></center>
          <center>` +
            Avatar({ id: 3, name: "Raida" }) +
            Avatar({ id: 4, name: "Tania" }) +
            `</center>
        </div>
      </div>
      `;

我没有收到错误，但我希望它能够使用返回函数。

Answer 1

您的 JSX 组件格式不正确。

你不能只在 JSX 中添加一个函数，你必须为你的Avatar组件使用 JSX 语法，前提是你想要呈现该 HTML。

所以Avatar({ id: 1, name: "Andrea" })变成了<Avatar id={1} name="Andrea" />等等

除此之外，我对您的Avatar组件进行了更改，因此它返回实际的 JSX 而不是像您那样的字符串，并修复了您在组件上遇到的一些其他错误，例如class -> className并将对象传递给style 。

所以你的代码看起来像这样：

export default function Mio() {
  // const app = document.getElementById('app'); // unused-var
  const Avatar = (params) => {
    const src = `https://randomuser.me/api/portraits/women/${params.id}.jpg`;
    return (
        <div>
          <br/>
          <picture>
            <img src={src} />
            ${params.name}
          </picture>
        </div>
     );
  };

  return (
    <div className="box01" style={{ background: 'rgba(0, 0, 0, 1)' }}>
      <div className="box02" style={{ background: 'rgba(50, 255, 0, 0.70)' }}>
        <center>
          <h1>Desarrolladoras</h1>
        </center>
        <center>
          <h2>Android</h2>
        </center>
        <center>
          <Avatar id={1} name="Andrea" />
          <Avatar id={2} name="Miluska" />
        </center>
      </div>
      <div className="box03" style={{ background: 'rgba(50, 0, 255, 0.70)' }}>
        <center>
          <h1>Desarrolladoras</h1>
        </center>
        <center>
          <h2>iOS</h2>
        </center>
        <center>
          <Avatar id={3} name="Raida" />
          <Avatar id={4} name="Tania" />
        </center>
      </div>
    </div>
  );
}