在静态网站中使用ReactJS：JSX代码无法执行问题求助

嘿，我之前也遇到过一模一样的问题！你用JSX写的组件没法显示，但原生React脚本正常运行，核心原因其实很简单——浏览器根本不认识JSX语法，它不是原生JavaScript，必须先转译成普通JS代码才能被浏览器执行。而你用的原生React脚本（比如React.createElement）是纯JS，浏览器能直接解析，所以能正常渲染。

下面给你几个具体的解决办法：

1. 引入Babel转译JSX #

浏览器没法直接处理JSX，所以你需要引入Babel来实时转译你的JSX代码。只要在HTML里添加Babel的CDN脚本，再把你的JSX代码放在type="text/babel"的<script>标签里就行：

<!-- 先引入React和ReactDOM -->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- 引入Babel用于转译JSX -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<!-- 你的JSX代码必须放在type="text/babel"的script标签内 -->
<script type="text/babel">
var Footer = React.createClass({ 
  render:function(){ 
    return <a href="www.example.com">Developed by Me</a>; 
  } 
});
ReactDOM.render( <Footer/>, document.getElementById('bluevineCredits') );
</script>

⚠️ 注意：这种方式适合开发环境快速测试，生产环境建议提前用Webpack、Vite等工具编译JSX，避免Babel在浏览器中转译带来的性能损耗。

2. 确保挂载DOM节点存在且脚本执行时机正确 #

要保证页面上确实存在id="bluevineCredits"的元素，而且你的React脚本要在这个元素之后加载，或者用DOMContentLoaded事件包裹代码，确保DOM完全加载后再执行React渲染：

document.addEventListener('DOMContentLoaded', function() {
  var Footer = React.createClass({ 
    render:function(){ 
      return <a href="www.example.com">Developed by Me</a>; 
    } 
  });
  ReactDOM.render( <Footer/>, document.getElementById('bluevineCredits') );
});

3. 升级React组件写法（可选但推荐） #

React.createClass在React 16及以上版本已经被弃用了，现在更推荐用ES6类组件或者函数组件，写法更简洁也更符合现代React规范：

函数组件写法（最推荐） #

function Footer() {
  return <a href="www.example.com">Developed by Me</a>;
}
ReactDOM.render(<Footer />, document.getElementById('bluevineCredits'));

ES6类组件写法 #

class Footer extends React.Component {
  render() {
    return <a href="www.example.com">Developed by Me</a>;
  }
}
ReactDOM.render(<Footer />, document.getElementById('bluevineCredits'));

按上面的方法调整后，你的JSX组件应该就能正常显示啦！

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