Reactに挑戦してみる 6

概要

Reactに挑戦してみる。いいなーこの本。

参考書籍

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

スプレッド属性を利用する

スプレッド属性-> コンポーネントや要素に複数の属性を設定する必要がある場合に、それらをまとめる１つのオブジェクトを用意して、渡すだけで、自動的に展開して設定し、機能させる。ということらしい。実際やってみたほうが早いな。

JSX

// スプレッド属性を使わずに、myAttributesというオブジェクトに、複数の属性を記録する。
var myAttributes = {
    type: 'checkbox',
  checked: true,
  readOnly: true,
  disabled: true,
  size: 8
}

ReactDOM.render(
    <p><input
    type = {myAttributes.type}
    checked = {myAttributes.checked}
    readOnly = {myAttributes.readOnly}
    disabled = {myAttributes.disabled}
    size = {myAttributes.size}
    />Check Me!</p>,
    document.getElementById('content')
);

ちょっと冗長になってしまうが、これをスプレッド属性を使うとスッキリする。

var myAttributes = {
    type: 'checkbox',
  checked: true,
  readOnly: true,
  disabled: true,
  size: 8
}

ReactDOM.render(
    <p><input {...myAttributes}/>Checke!</p>,
    document.getElementById('content')
);

これは楽！！

スプレッド属性でスタイルを設定する。

var myStyle = {
    fontStyle: 'normal',
  fontFamily: 'Courier',
  color: 'brown'
}

ReactDOM.render(
    <h2 style = {{...myStyle}}>
    Let's Spread!
  </h2>,
  document.getElementById('content')
);

これはすごい、楽やなぁ。

カスタムコンポーネントでスプレッド属性を利用する。

var ColoredButton = React.createClass({
    render: function(){
    return (
        <button {...this.props}>
        {this.props.children}
      </button>
     )
  }
});

ReactDOM.render(
    <ColoredButton
    style = {{
        color: '#A04020',
      backgroundColor: '#90C0A0',
      fontFamily: 'Serif',
      fontSize: 22
    }}
    type = 'button'
    disabled = {false}>
    Click Me!
    </ColoredButton>,
    document.getElementById('content')
)

• <button {...this.props}> で、button要素に対してプロパティの内容をスプレッド属性として与える。

• {this.props.children} で、ボタンに表示する文字列をプロパティの子の要素として与える？->Click Me!ってとこのことなんだけど、children という気がする。つまり今回は、簡略化するとClick Me!なので、this.propsのchildrenのclickMeを返しており、そのタグには、{...this.props}でスプレッド属性を全て渡している。ちょっと日本語難しいな。

• {...this.props}でスプレッド属性として全てを渡してあるので、実は、「this.props.children」はなくてもいい。

var ColoredButton = React.createClass({
    render: function(){
    return (
        <button {...this.props}/>
     )
  }
});

これでOK！

デフォルトの属性をスプレッド属性で設定する

多分カスタムコンポーネント内で、デフォルトの属性をスプレッド属性で定義してしまうということだと思う。なんかこの使い方が多そうなきがするな。わかりやすいし。

var ColoredButton = React.createClass({
    render: function() {
    var defAttrs = {
        style: {
        color: '#A04020',
        backgroundColor: '#90C0A0',
        fontFamily: 'Serif',
        fontSize: 22
      },
      type: 'button',
      disabled: false
    }
    return (
        <button {...defAttrs}>
        {this.props.children}
        </button>
    )
  }
});

ReactDOM.render(
    <ColoredButton>
    Tap Me!
  </ColoredButton>,
  document.getElementById('content')
);

• {this.props.children}で、の子の要素の「Tap Me!」を代入する。
• 注意点としては、今回は、defAttrsは、javascriptのオブジェクトになるので、JSXとはちょっと違うところ。

デフォルトの属性をオーバーライドする

• カスタムコンポーネント内のreturn文で変えてみる。disabled={true}とJSXで指定してみる。

var ColoredButton = React.createClass({
    render: function() {
    var defAttrs = {
        style: {
        color: '#A04020',
        backgroundColor: '#90C0A0',
        fontFamily: 'Serif',
        fontSize: 22
      },
      type: 'button',
      disabled: false
    }
    return (
        <button {...defAttrs} disabled = {true}>
        {this.props.children}
        </button>
    )
  }
});

できた。まあでもこれだとあんま意味はない。

• カスタムコンポーネントを実行する側から属性を上書きする。

var ColoredButton = React.createClass({
    render: function() {
    var defAttrs = {
        style: {
        color: '#A04020',
        backgroundColor: '#90C0A0',
        fontFamily: 'Serif',
        fontSize: 22
      },
      type: 'button',
      disabled: false
    }
    return (
        <button {...defAttrs} {...this.props}> # ここが変更している。
        {this.props.children}
        </button>
    )
  }
});

ReactDOM.render(
    <ColoredButton disabled={true}># ここでjsxで属性を指定する。
    Tap Me!
  </ColoredButton>,
  document.getElementById('content')
);

• なんと！カスタムコンポーネント内でデフォルトの属性をスプレッド属性で設定->さらに{...this.props}でプロパティとして与えられた属性で上書きするというシンプルな方法で実現可能！なるほど、すごい！

• もちろん、 {this.props.children}は省略可能！

スプレッド属性便利やなぁ！