Reactで多重クリックを防止する方法

親コンポーネントから子コンポーネントに要素を引き渡す方法

開始タグと終了タグの両方を含む JSX 式においては、タグに囲まれた部分は、props.children という特別なプロパティとして渡されます。このような子要素を渡す方法はいくつかあります。

pure要素についてのCSS関係

function HelloWorld() {
  return (
    <div>
      Hello world
      <p>scoped!</p>
      <style jsx>{`
        p {
          color: blue;
        }
        div {
          background: red;
        }
        @media (max-width: 600px) {
          div {
            background: blue;
          }
        }
      `}</style>
      <style global jsx>{`
        body {
          background: black;
        }
      `}</style>
    </div>
  )
}

export default HelloWorld

elcia

JSX Spread Attributes(三点リーダー)

子コンポーネントに渡したい値に変更があった場合に変更箇所が少なくて済むため使用する。

const props = { foo: "foo", bar: "bar" };
render() {
  return <Child foo={props.foo} bar={props.bar} />
}
　　　　　　　↓

const props = { foo: "foo", bar: "bar" };
render() {
  return <Child {...props} />
}