如何在React极简HTML模板中使用类？

没问题！你用的这个模板已经集成了Babel，完全可以直接写ES6风格的React类组件，不用额外配置。我给你整理好完整示例和关键要点：

完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>React Class Component Demo</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
  <!-- 挂载React组件的根容器 -->
  <div id="root"></div>

  <!-- 必须指定type="text/babel"，让Babel转译JSX和ES6代码 -->
  <script type="text/babel">
    // 定义类组件，必须继承React.Component
    class Greeting extends React.Component {
      // 类组件核心：必须实现render方法，返回要渲染的JSX
      render() {
        return <h1>Hi there, {this.props.username}!</h1>;
      }
    }

    // 将组件渲染到页面的root容器中
    ReactDOM.render(
      <Greeting username="Class Component User" />,
      document.getElementById('root')
    );
  </script>
</body>
</html>

核心注意事项 #

• 务必用<script type="text/babel">：浏览器默认不认识JSX语法和ES6类，加上这个类型才能让页面里的Babel把代码转译成浏览器能解析的格式。
• 类组件必须继承React.Component：这是React类组件的基础要求，继承后才能使用props、生命周期等组件特性。
• 必须包含render()方法：这个方法是类组件的入口，返回你要展示的JSX内容。
• 通过this.props接收外部属性：像示例里的username，可以通过this.props在组件内部读取传入的值。

如果需要给组件添加内部状态，也可以在构造函数里初始化，比如：

class Counter extends React.Component {
  constructor(props) {
    super(props);
    // 初始化组件状态
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>当前计数：{this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          点我加1
        </button>
      </div>
    );
  }
}

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