6 Reactjs 不使用ES6

深藏阁楼爱情的钟 2023-02-27 12:06 15阅读 0赞

通常情况下你可以用普通的 JavaScript 类定义一个组件:

class Greeting extends React.Component \{

render() \{

return <h1>Hello, \{this.props.name\}</h1>;

\}

\}

如果你不使用 ES6 ，你可以使用 create-react-class 方法代替：

var createReactClass = require('create-react-class');

var Greeting = createReactClass(\{

render: function() \{

return <h1>Hello, \{this.props.name\}</h1>;

\}

\});

**声明默认 Props**

在函数和 ES6 classes(类) 中，defaultProps 被定义为组件本身的属性：

class Greeting extends React.Component \{

// ...

\}

Greeting.defaultProps = \{

name: 'Mary'

\};

在 createReactClass() 中，你需要在所传递的对象中定义 getDefaultProps() 方法:

var Greeting = createReactClass(\{

getDefaultProps: function() \{

return \{

name: 'Mary'

\};

\},

// ...

\});

**设置初始化 State(状态)**

在 ES6 classes(类) 中，你可以在构造函数通过给 this.state 赋值来定义初始状态:

class Counter extends React.Component \{

constructor(props) \{

super(props);

this.state = \{count: props.initialCount\};

\}

// ...

\}

在 createReactClass() 函数中，你可以提供一个指定的 getInitialState 方法来返回初始状态:

var Counter = createReactClass(\{

getInitialState: function() \{

return \{count: this.props.initialCount\};

\},

// ...

\});

**自动绑定**

在以 ES6 classes(类) 方式声明的 React 组件中，方法遵循与普通 ES6 的 class 中相同的语义。也就是说方法不会自动绑定 this 到实例中，你必须在构造函数中显式的使用 .bind(this) :

class SayHello extends React.Component \{

constructor(props) \{

super(props);

this.state = \{message: 'Hello!'\};

// 将handleClick方法绑定到当前类，这样handleClick 的this就指向当前类了

this.handleClick = this.handleClick.bind(this);

\}

handleClick() \{

alert(this.state.message);

\}

...

\}

在 createReactClass() 中，并不需要这么做，因为方法可以自动绑定。

var SayHello = createReactClass(\{

getInitialState: function() \{

return \{message: 'Hello!'\};

\},

handleClick: function() \{

alert(this.state.message);

\},

render: function() \{

return (

<button onClick=\{this.handleClick\}>

Say hello

</button>

);

\}

\});

发表评论取消回复

表情：

评论列表（有 0 条评论，15人围观）

还没有评论，来说两句吧...

相关阅读

相关 ECMAScript 6(ES6)

ES6 是什么？ ES6 是 [ECMAScript][] 6 的简称，它是JavaScript 语言的下一代标准，已于2015年6月正式发布。它的目标是使Javascr

朴灿烈づ我的快乐病毒、/ 2023年08月17日 15:23/ 0 赞/ 257 阅读

相关 ES6语法使用

1. 箭头函数 // 通过箭头函数，当发生on订阅事件，发生favorites时就会触发回调事件。 [vm.$on( event, callback )][vm._on

迷南。/ 2023年06月14日 04:22/ 0 赞/ 98 阅读

相关 6 Reactjs 不使用ES6

通常情况下你可以用普通的 JavaScript 类定义一个组件: class Greeting extends React.Component \{ render()

深藏阁楼爱情的钟/ 2023年02月27日 12:06/ 0 赞/ 16 阅读

相关 6 Reactjs 条件渲染

在 React 中，你可以创建不同的组件封装你所需要的行为。然后，只渲染它们之中的一些，取决于你的应用的状态。 function Greeting(props) \{

秒速五厘米/ 2023年02月27日 08:08/ 0 赞/ 111 阅读

相关 es6 WeakSet使用

//new WeakSet()声明 let weakObj=new WeakSet(); let obj={a:'jspang',b:'技术胖'}

柔光的暖阳◎/ 2022年12月01日 09:57/ 0 赞/ 291 阅读

相关 ES6.6.2 使用小结

1.使用6.6.2版本的ES前，首先来安装ES吧，Win10下安装教程参考：[https://blog.csdn.net/chy2z/article/details/80461

布满荆棘的人生/ 2022年03月06日 18:36/ 0 赞/ 333 阅读

相关 ES6.6.2 使用小结 - ES工具类使用

1.以下是封装了ES常用的基本方法，可以用来做一些简单的测试。如：获取ES的TransportClient/IndicesAdminClient、判定索引是否存在、创建

深藏阁楼爱情的钟/ 2022年02月28日 03:42/ 0 赞/ 393 阅读

相关 es6

简介 - ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了。

た入场券/ 2021年09月15日 15:40/ 0 赞/ 461 阅读

相关 ES6

ES6 1.let和const 2.ES6解构赋值 3.ES6箭头函数 4.ES6剩余参数 5.ES6扩展运算符... 6.ES6内置

野性酷女/ 2021年09月07日 06:16/ 0 赞/ 465 阅读

相关 ES6基础-ES6 class

![file][] 作者 | Jeskson 来源 | 达达前端小酒馆 > ES - Class 类和面向对象：面向对象，即万物皆对象，面向对象是我们做开发一种的方

我会带着你远行/ 2021年08月20日 00:23/ 0 赞/ 678 阅读