HighBridge’s blog

勉強の記録

2021/8/17

react 日々の記録

メモ

React + Node.js

  • Reactでは親コンポーネントから子コンポーネントに何かを伝えるときは、プロパティを介して情報を伝達する。
  • 逆に子コンポーネントの変化を親コンポーネントに伝えるときは、イベントを利用する。
  • 3-3のコードが実行できなかったが、イベントの処理とか諸々を勉強した方が良さそうなのでとりあえず先に進む。

state(状態)とprops(プロパティ)について

state(状態)

コンポーネントの状態を表す書き換え可能なデータの集まり

  • 状態とは状況に応じて変化するもの
  • 状態とは書き換え可能である
  • 状態が変更されるとコンポーネントの再描画が行われる
  • 外部には非公開でコンポーネント自身が管理するべき

props(プロパティ)

外部からのコンポーネントへの窓口というべき役割

  • プロパティは読み取り専用
  • プロパティは親要素から設定されるもの
  • 初期値と型の検証を行うことができる
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
  <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <div id="info"></div>
  <script type="text/babel">
    // 色選択コンポーネントの定義
    class ColorBox extends React.Component {
      constructor (props) {
        super(props)
        // 状態の初期化
        this.state = {
          index: 0,
          colors: ['red', 'blue', 'green', 'yellow', 'black']
        }
      }
      // 描画
      render () {
        // stateから値を取り出す
        const colors = this.state.colors
        const index = this.state.index
        // 現在の選択色
        const cur = (index >= 0) ? colors[index] : ''
        // 各色ごとにspan要素を生成する
        const items = colors.map((c) => {
          // 選択色なら枠をつける
          let bs = '1px solid white'
          if (c == cur){
            bs = '1px solid black'
          }
          // 色ごとのスタイルを設定
          const cstyle = {
            color: c,
            border: bs
          }
          // 色をクリックした時の処理
          const clickHandler = (e) => {
            const c = e.target.style.color
            const i = this.state.colors.indexOf(c)
            // 状態を更新する
            this.setState({index: i})
            if(this.props.onColorChange){
              this.props.onColorChange({color: c})
            }
          }
          // span要素で色のタイルを返す
          return (
            <span onClick={clickHandler}
              style={cstyle}>■</span>
          )
        })
        // 描画内容を返す
        return (
          <div>{items}</div>
        )
      }
    }
    // ReactでDOMを書き換える
    const colorHandler = (e) => {
      ReactDOM.render(
        <span>{e.color}</span>,
        document.getElementById('info')
      )
    }
    const dom = <div>
      <ColorBox id='cb' onColorChange={colorHandler} />
    </div>

    ReactDOM.render(dom,
      document.getElementById('root'))
  </script>
</body>
</html>

メモ

  • mapメソッドを使うとある配列を元にして別の配列要素を生成することができる。
  • JSXは別の部分でJSXにより生成したオブジェクトやその配列を埋め込むように指定できる。