时间戳

首页 > 解决方案 > React JS 作为 HTML 返回

reactjs - React JS 作为 HTML 返回

问题描述

我知道我在 React JS 上很糟糕，但我找不到任何具体的东西我想将此函数返回到我的 tsx 文件中并将它写在屏幕上，但它应该在一个组件中

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

标签： reactjstypescript

解决方案

ReactDOMServer有一个名为renderToStaticMarkup的函数，它可以接受一些 JSX 并将静态 HTML 作为字符串返回。

您可能遇到的问题是它没有使用缩进等格式化。

您的函数可能看起来像这样：

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

生成的 HTML 是：

<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>

推荐阅读