React.js入門(3) ~コンポーネントの活用~

データの一覧表示
1. <ul>でリスト表示する
スタイルオブジェクトの利用
複数コンポーネントの利用
グローバル変数によるデータの共有
1. memo

データの一覧表示

JSXには繰り返し表示する構文がありません。
{}を使ってJavaScriptのコードを記述し表示させることはできるので、配列の”map”メソッドを使って表示する。

{配列.map((引数) => {
  return <JSX>
})}

<ul>でリスト表示する

ul, ol {
  list-style-type: none;
  padding: 0px;
}
li {
  text-align: left;
  font-size: 20px;
  padding: 5px;
  margin: 5px 20px;
  border: solid 2px lightgray;
  border-radius: 5px;
}

function App(props) {
const data = [
  {name: "Taro", mail: "taro@yamada"},
  {name: "Hanako", mail: "hanako@flower"},
  {name: "Sachiko", mail: "sachiko@happy"},
]

  return (
    <div className="App">
      <h1 className={props.color}>{props.title}</h1>
      <ul>
        {data.map((item, key) => {
          return (
            <li>{item.name} [{item.mail}]</li>
          )
        })}
      </ul>
    </div>
  )
}¥

スタイルオブジェクトの利用

コンポーネントのスタイルを設定する属性には、classNameの他に”style”もある。
classNameはスタイルクラスの名前を文字列として指定するだけで簡単だったが、styleは値をオブジェクトで設定する必要がある。

{
  スタイル名: 値,
  スタイル名: 値,
  ...
}

ハイフンを使えないので、キャメル記法で書く
ex. font-size　→ fontSize

import './App.css'
import {useState} from 'react'

function App(props) {
  var [count, setCount] = useState(0)
  var [data, setData] = useState([
    {
      position: "absolute",
      left: "0px",
      top: "0px",
      width: "100%",
      height: "100%",
      backgroundColor: "#fff0"
    }
  ])

  const doClick = (event) => {
    const ob = {
      position: "absolute",
      left: (event.pageX - 50) + "px",
      top: (event.pageY - 50) + "px",
      width: "100px",
      height: "100px",
      backgroundColor: "#ff000066",
      borderRadius: "50%"
    }
    data.push(ob)
    setCount(count + 1)
  }

  return (
    <div className="App">
      <h1>{props.title}</h1>
      <p>{count} objects.</p>
      <div onClick={doClick}>
        {data.map((item, key) => {
          return (
            <div style={item} key={key}></div>
          )
        })}
      </div>
    </div>
  )
}

複数コンポーネントの利用

function Message(props) {
  return (
    <p className="ClassA">{props.message}</p>
  )
}

function Data(props) {
  return (
    <ul>
      {props.data.map((item, key) => {
        return (
          <li key={key}>name</li>
        )
      })}
    </ul>
  )
}

function App(props) {
  const data = [
    {name: "Taro"},
    {name: "Hanako"},
    {name: "Sachiko"}
  ]

  return (
    <div className="App">
      <h1>{props.title}</h1>
      <Message message="This is sample message!" />
      <Data data={data} />
    </div>
  )
}

グローバル変数によるデータの共有

コンポーネント間のデータの共有をしたい場合、グローバル変数をしようする。
属性と引数を使用して値を渡しても、コンポーネント内で値を変更した場合に渡されたコンポーネント側の値（引数で受け取った側の値）は変更されない。

import './App.css'
import {useState} from 'react'

var data = {
  data: [
    {name: "Taro"},
    {name: "Hanako"},
    {name: "Sachiko"}
  ],
  message: "Hello"
}

function Message() {
  return (
    <p className="ClassA">{data.message}</p>
  )
}

function Data() {
  return (
    <ul>
      {data.data.map((item, key) => {
        return (
          <li key={key}>{item.name}</li>
        )
      })}
    </ul>
  )
}

function App(props) {
  const [input, setInput] = useState("")

  const doChange = (event) => {
    setInput(event.target.value)
  }

  const doClick = () => {
    data.data.push({name: input})
    data.message = "you typed: \"" + input + "\"."
    setInput("")
  }

  return (
    <div className="App">
      <h1>{props.title}</h1>
      <Message />
      <input onChange={doChange} value={input} />
      <button onClick={doClick}>Click</button>
      <Data />
    </div>
  )
}