学習バンザイITエンジニアの精神安穏日記

ITエンジニアというより、IT系雑務者

react

reactでswich文をrender内で使う方法

switchの原型とどめてないというか、objectだが、可視性が高いので採用。 render: return ( { { 'Text': <>{item.content.text}, 'Image': <Image src={ item.content.imageUrl } /> }[item.content.__typename] } ) reactjs - How to use switch statement inside a React component? - Stack Overf</image>…

reactのLinkでダウンロードボタン作る

2020-12-18 15:52:28 antd使ってるけど、違うcomponent使えばOKなはず import * as React from 'react' import { Button } from 'antd' import { DownloadOutlined } from '@ant-design/icons' import { Link } from 'react-router-dom' export const Downlo…

Reactのcomponent内で無理やりstyleタグを使う方法

シチュエーション Reactのコンポーネントライブラリ(antdなど)使っていると、あるコンポーネントの親に対して、styleを定義したい時がある。 方法 あるコンポーネント(<SomeComponent>)をSegment(<>)で囲う Segment内に定義する style定義で使う{ と}は{'{'}と{'}'}でエスケ</somecomponent>…

【react】Each child in a list should have a unique "key" prop. でIn Fragmentのときの修正

エラー内容 Warning: Each child in a list should have a unique "key" prop. <中略> In Fragment In Fragmentを勝手にGraphQLのFragmentと勘違いしてしまいハマってしまった。 直し方 before {categories.map((category) => ( <> )} after <>ではなく、Re…