如何将博客侧边栏制作为可复用组件？React尝试失败求助

方案1：PHP 引入（适合带PHP环境的博客） #

这是最省心的静态站点方案，不用复杂框架：

1. 把你的侧边栏代码单独存成一个文件，命名为sidebar.php，内容就是你提供的那段HTML（从<td class="col1">到</td>的全部内容）。
2. 在每个页面原来放侧边栏的位置，删掉旧代码，替换成：

<?php include 'sidebar.php'; ?>

以后只要修改sidebar.php，所有页面的侧边栏会自动同步更新。

方案2：JavaScript 加载（纯静态HTML环境） #

如果你的博客是纯静态HTML，没有PHP支持，用JS加载也能实现：

1. 把侧边栏代码存成sidebar.html文件。
2. 在每个页面的侧边栏位置，添加一个空容器：

<td class="col1" id="sidebar-container"></td>

3. 在页面底部</body>标签前，添加这段JS代码：

fetch('sidebar.html')
  .then(res => res.text())
  .then(html => {
    document.getElementById('sidebar-container').innerHTML = html;
  });

页面加载时会自动读取sidebar.html的内容插入到容器里，修改这个文件就能同步所有页面的侧边栏。

方案3：简化 React 实现（解决你之前的尝试问题） #

如果还是想用React，避开复杂脚手架，用极简方式实现：

1. 先下载React、ReactDOM和Babel的本地文件（官网可获取），在页面头部引入：

<script src="react.development.js"></script>
<script src="react-dom.development.js"></script>
<script src="babel.min.js"></script>

2. 在页面需要侧边栏的位置添加容器：

<div id="sidebar-root"></div>

3. 在页面底部添加组件代码：

<script type="text/babel">
const Sidebar = () => {
  return (
    <td className="col1">
      {/* 复制你原来的侧边栏内容，注意两个关键修改：
          1. HTML的class属性改成className
          2. 内联style写成JS对象格式，比如style="color: #5C331B"改成style={{color: '#5C331B'}} */}
      <h3 style={{fontVariant: 'small-caps', fontWeight: 'bold', color: '#5C331B'}}>&nbsp;Art&nbsp;</h3>
      <p><a style={{display: 'block'}} href="Theodor Kittelsen.html">&nbsp;Theodor Kittelsen&nbsp;</a></p>
      {/* 把剩下的Art、Poetry、Music分类和底部的box内容都按这个格式复制进来 */}
    </td>
  );
};

ReactDOM.render(<Sidebar />, document.getElementById('sidebar-root'));
</script>

你之前尝试React失败大概率是没注意class改className、内联style格式转换这两个细节。

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