Reactjs - Bài 4 - props là gì

Goal

Giới thiệu props và làm sao sử dụng nó.

Giới thiệu

Trong bài trước, chúng ta đã có dịp tiếp xúc với props, khi dùng nó để truyền giá trị name là ‘Phúng’ vào trong.
Vậy props là gì? Nó đóng vai trò như thế nào trong React Component?

props là gì

props là một attribute của Component. Chúng ta có thể sử dụng props như là một Object hay là một Function

props đóng vai trò gì

props chứa giá trị được chuyển từ bên ngoài vào trong Component.

PropTypes

Khi bạn muốn validate props, hãy sử dụng PropTypes để làm việc đó.
var Avatar = React.createClass({
  propTypes: {
    name:   React.PropTypes.string.isRequired,
    id:     React.PropTypes.number.isRequired,
    width:  React.PropTypes.number.isRequired,
    height: React.PropTypes.number.isRequired,
    alt:    React.PropTypes.string
  },
  render() {
    var src = `/img/avatar/${this.props.id}.png`;
    return (
      <div>
      <img src={src} width={this.props.width} height={this.props.height} alt={this.props.alt} />
      <span>{this.props.name}</span>
      </div>
    );
  }
});
<Avatar name="foo" width={100} height={100} />

Default Prop value

React cung cấp cho bạn cách define default valuse cho props rất rõ ràng 
var Hello = React.createClass({
  getDefaultProps() {
    return {
      name: "React"
    };  
  },
  render() {
    return <div>Hello {this.props.name}</div>
  }
});

setProps và replaceProps

Khi bạn gọi setProps(), nó sẽ thay đổi properties của Component và trigger một re-render. Ngoài ra, bạn cũng có thể đưa vào một callback function mà sẽ được thực thi một khi setProps được hoàn thành.
Hãy thử chạy ví dụ sau
<!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() {
        var src='http://canime.files.wordpress.com/2010/05/mask-dtb.jpg';
        return (
          <div>
            <img src={src} width={this.props.width} height={this.props.height} alt="alt" />
            <span>{this.props.name}</span>
          </div>
        );
      }

    });


    var AvatarEl = <Avatar name="Foo" width={100} height={100}/>;

    var AvatarComponent = React.render(AvatarEl, document.body);

  </script>
</body>
</html>
Bây giờ, ta thử thay đổi các properties name của AvatarComponent ở trên bằng cách thêm đoạn code sau:
    AvatarComponent.setProps({name: "Bar"}, function(){
      alert("AvatarComponent setProps Done!");
    });
Sau đó, bạn thử refresh lại trang tên của Avatar giờ thành ‘Bar’, và sau khi setProps() hoàn thành thì nó thực thì callback function là alert string “AvatarComponent setProps Done!”.
Bây giờ, ta thử dùng replaceProps() để thay đổi properties name của AvatarComponent ở trên bằng cách thêm đoạn code sau:
    AvatarComponent.replaceProps({name: "Bar-Foo"}, function(){
      alert("AvatarComponent replaceProps Done!");
    });
Bạn có thấy điều gì khác giữa setProps() và replaceProps() không?
Với setProps() nó merge property nào mà nó set.
Với replaceProps() nó delete các props tồn tại trước đó và thay bởi properties mới.
Nhãn: