如何在HTML文件中导入React组件并批量渲染自定义Card组件

实现可行性说明 #

这个需求完全可以实现，以下是具体实现方案以及你之前操作未生效的常见排查点：

未生效常见排查项 #

1. 依赖引入顺序错误：需按顺序引入React、ReactDOM依赖，如果你使用JSX语法编写组件，还需要引入Babel Standalone完成浏览器端实时编译。
2. 脚本类型配置错误：存放JSX代码的script标签必须添加type="text/babel"属性，否则浏览器会将JSX语法识别为非法JS代码直接报错。
3. 执行时机错误：如果你的脚本放在head标签内，会出现DOM尚未加载完成就执行渲染逻辑的问题，建议将React相关脚本放在body标签末尾，或者在渲染逻辑外层包裹DOMContentLoaded事件监听。

具体实现代码 #

1. HTML结构

你可以用自定义data-*属性存储每个卡片的参数，给所有要渲染卡片的容器统一加类名标识：

<!-- 引入依赖（放在body末尾，React代码之前） -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<!-- 卡片容器，可批量添加多个 -->
<div class="card-root" data-img="pic1.jpg" data-title="第一篇文章" data-author="张三"></div>
<div class="card-root" data-img="pic2.jpg" data-title="第二篇文章" data-author="李四"></div>
<div class="card-root" data-img="pic3.jpg" data-title="第三篇文章" data-author="王五"></div>

2. React代码

在type="text/babel"的script标签内编写组件和批量渲染逻辑：

class Card extends React.Component {
  render() {
    return(
        <div className="card">
          <img src={this.props.img} />
          <div className="card-body">
            <h2>{this.props.title}</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            <h5>{this.props.author}</h5>
          </div>
        </div>
    )
  }
}

// 批量渲染所有卡片
document.querySelectorAll('.card-root').forEach(rootEl => {
  const cardProps = rootEl.dataset
  // React 18 写法，如果用旧版本React可替换为ReactDOM.render(<Card {...cardProps}/>, rootEl)
  const root = ReactDOM.createRoot(rootEl)
  root.render(<Card {...cardProps}/>)
})

内容的提问来源于stack exchange，提问作者Manuel Nelson