有没有办法创建没有ES6类的React组件和像Babel这样的预编译工具?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了有没有办法创建没有ES6类的React组件和像Babel这样的预编译工具?相关的知识,希望对你有一定的参考价值。

我开始学习React了。阅读文档后,似乎创建组件的常规方法是使用ES6类:

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

现在,我想知道是否有一种方法可以创建没有ES6的组件和预编译工具,如Babel。 React文档建议您使用名为create-react-class的库:

var createReactClass = require('create-react-class');
var Greeting = createReactClass({
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});

但这也要求您使用Node并在最后编译代码。

我正在寻找的是一种只使用ES5而没有依赖关系的方法。那里的React.createClass`可以很好地工作,但毕竟它已被弃用了。

另一种方法是使用普通函数,但在这种情况下,我不会有像componentDidMount这样的钩子的好处。

那么,有没有人有这方面的解决方案或建议?任何提示都会受到欢迎。

答案

您不必使用节点,只需在浏览器中包含CDN's并使用createClass即可。

这是CDN的:

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

退房:React without ES6

编辑:正如@Sidney所说,你还需要React without JSX

以上是关于有没有办法创建没有ES6类的React组件和像Babel这样的预编译工具?的主要内容,如果未能解决你的问题,请参考以下文章

React 中的 ComponentPureComponent无状态组件 之间的比较

如何理解react中的super(),super(props)

react中这些细节你注意过没有?

为啥react的组件要super

React创建组件的不同方式(ES5 & ES6)

为啥react的组件要super