Reactjs - Bài 11 - spread attribute

Goal

Giới thiệu spread attribute trong JSX syntax component.

Ví dụ dẫn nhập

Hãy trở lại ví dụ trong bài giới thiệu về props, nhưng hãy để property src đóng vai trò là một I/F của component và bỏ attribute alt đi.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
  <title>Basic Example Props</title>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
  <script type="text/jsx">
    var Avatar = React.createClass({
      propTypes: {
        name: React.PropTypes.string.isRequired,
        width: React.PropTypes.number.isRequired,
        height: React.PropTypes.number.isRequired
      },
      render() {
        return (
          <div>
            <img src={this.props.src} width={this.props.width} height={this.props.height}/>
            <span>{this.props.name}</span>
          </div>
        );
      }
    });
    var AvatarEl = <Avatar name="Foo" width={100} height={100} src="http://canime.files.wordpress.com/2010/05/mask-dtb.jpg" />;
    var AvatarComponent = React.render(AvatarEl, document.body);
  </script>
</body>
</html>

JSX có cung cấp cho ta một syntax gọi là spread operator giúp chúng ta viết ngắn gọn phần return img như sau:

<img src={this.props.src} width={this.props.width} height={this.props.height}/>

thành: 

<img {...this.props}/>

... được gọi là spread operator.

Bây giờ, hãy mở JSX Compiler:

https://facebook.github.io/react/jsx-compiler.html

và nhập lần lượt

Cách 1:

<img src={this.props.src} width={this.props.width} height={this.props.height} />

Cách 2:

<img {...this.props}/>

vào phần bên trái, nó sẽ Output ra Javascript lần lượt như sau:

Đối với Cách 1, nó sẽ Output:

React.createElement("img", {src: this.props.src, width: this.props.width, height: this.props.height})

Đối với Cách 2, nó sẽ Output

React.createElement("img", React.__spread({},  this.props))

Bạn có thể thấy là cả 2 cách viết thì nó đều truyền props object vào method React.createElement, điểm khác nhau ở đây là với Cách 2 nếu bạn muốn truyền vào thêm thuộc tính alt cho thì bạn cũng không cần phải add thêm alt={this.props.alt} như trong cách 1. Is it cool?. Bây giờ bạn hãy thực sự dùng cách 2, và bạn có thể thêm alt=”it is cool!” vào đoạn code sau và reload lại page, check view, ¯_(ツ)_/¯ , trong đã có thêm thuộc tính alt

var AvatarEl = <Avatar name="Foo" width={100} height={100} src={"http://canime.files.wordpress.com/2010/05/mask-dtb.jpg"} alt="it is cool!"/>;

spread operator and ES6

spread operator là syntax mới của Javascript trong bộ chuẩn ES6. Nếu bạn muốn tìm hiểu thêm thì link bên dưới sẽ giúp cho bạn:

Bài viết:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

https://babeljs.io/docs/learn-es2015/#default-rest-spread

https://leanpub.com/exploring-es6/read

Tool compile từ ES6 sang Javascript version hiện tại

https://babeljs.io/repl/

Hãy sử dung tool trên để nhập cú pháp có chứa spread operator và xem nó output ra cú pháp js như thế nào.

Nhãn: