propsを渡す時にstyled-componentでハマったメモ

公式のサイトをみてチェックしていたとはいえpropsの渡し方と考え方でハマったのでメモ

コンポーネント

//editingをpropsとして渡す このeditingにはtrue,falseが入ってくる
<MyComponent
   onEdit={this.handleEdit}
   editing={editing}
/>

propsで切り替えられた例

// @flow

import React from 'react';
import styled from 'styled-components';

type Props = {
  onEdit: () => void,
  editing: boolean
};

function MyComponent({ onEdit, editing }: Props) {
  return (
    <div>
      <Menu editing={editing}>
        <li onClick={onEdit}>イベント</li>
      </Menu>
    </div>
  );
}

export default MyComponent;

const Menu = styled.ul`
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  li {
    cursor: pointer;
    text-decoration: underline;
    margin-left: 8px;
  }
  //ここでpropsがtrue,falseで切り替え
  display: ${props => (props.editing ? 'none' : 'block')};
`;

propsで最初切り替えられなかった例

function MyComponent({ onEdit, editing }: Props) {
  return (
    <div>
//ここにpropsを渡すだけで属性のところを書いていなかった ⇨<Menu editing={editing}>
      <Menu editing>
        <li onClick={onEdit}>イベント</li>
      </Menu>
    </div>
  );
}

memo

disabled
checked
のときは属性を書かないと切り替わらない

親から渡ってきたpropsに属性を指定していないからflagが切り替わらなかった

まとめ

styled-comonentsはめちゃくちゃ便利だがreactやるときはpropsが親からどうわたってくるのとか、そういうのをみて慣れないとダメだと改めて感じましたとさ

もっと勉強します。。。