reactjs - React JS returnerar som HTML

Jag vet att jag är hemsk på React JS men jag kunde inte hitta något specifikt för detta, jag vill returnera denna funktion till min tsx-fil och skriva ut den på skärmen men den borde vara i en komponent

function getUsers() {
  const Users = ({ users } : { users:any }) => {
    return (
      <div>
        {users.map((user : any, i : any) => (
          <div className="card">
          <img className="card-img-top" src={userPic} alt="Card image cap" />
            <div className="card-body">
              <h5 className="card-title">{user.name}</h5>
              <h6 className="card-subtitle mb-2 text-muted">{user.email}</h6>
            </div>
          </div>
        ))}
      </div>
    )
  };
  return Users;
}```

Svar #1

ReactDOMServer har en funktion som kallas renderToStaticMarkup som kan ta lite JSX och returnera den statiska HTML:en som en sträng.

Problemet du sannolikt kommer att ha är att det inte är formaterat med indragning etc.

Din funktion kommer förmodligen att se ut ungefär så här:

const generateHtml = (users: any[]) => {
  const html = (
    <div>
      {users.map((user: any, i: any) => (
        <div className="card" key={i.toString()}>
          <img className="card-img-top" src={user.userPic} alt="Card image cap" />
          <div className="card-body">
            <h5 className="card-title">{user.name}</h5>
            <h6 className="card-subtitle mb-2 text-muted">{user.email}</h6>
          </div>
        </div>
      ))}
    </div>
  );

  return ReactDOMServer.renderToStaticMarkup(html);
};

Den resulterande HTML-koden är:

<div><div class="card"><img class="card-img-top" src="1.png" alt="Card image cap"/><div class="card-body"><h5 class="card-title"></h5><h6 class="card-subtitle mb-2 text-muted"></h6></div></div></div>