タイトルにテストをしたい！と書きましたが、実際は元々React17では動いていたんですが、React18にしたら動かなくなったので動かしたいっ！です。 React18はreact-lazyloadを使わなくても、React.lazy() / Suspenseで、似たようなことはできるんですが書き換え…

Routerあんまり触ってなかったんですが、pathで指定した値(/archives/11111みたいなやつ)が取れるんですね😀 <Routes> <Route path="/archives/:id" element={<Archive />} /…

タイトルの通りですが、 export default function Hoge() { return ( <h1>ほげほげ</h1> ); } 上記のようなコンポーネントを普通にimportすれば import Hoge from './hoge'; で、lazyを使ったと…

例えばscrollの位置を保存するような処理を書こうとすると、連続してイベントが発生してしまって処理が無駄に行われる場合があります。 const = useState(0); // heightが変更された時 useEffect(() => { // 保存する save(height); },…

サンプルが雑ですが、hoge.tsxにはHogeとFooがあって、Hogeはexport defaultです。 export default Hoge = () => { render <>Hoge</>; } export Foo = () => { rende…

そもそもjsで書いてたコードをTypescriptにしないと行けないところですが、とりあえずHooksへの書き換えをメモ程度に。 componentDidMount componentDidMount() { console.log('mount!!'); } マウントされた時に何かしたいやつですが…

componentDidMountの置き換え componentDidMount() { getHogeList(); } mount時にデータ取得するようなやつ。 useEffect(() => { getHogeList(); }, []); 二つ目の引数に空のArrayを渡すと最初のre…

やりたいことをコードで書いてみたけど、これ何の為に必要なのかよくわからんなｗ render ( <a onClick={e=>{ console.log('parent!!'); }}> 外側 <span onClick={e=>{ console.log('child…

ドキュメントを上から読んでいって、まずは普通に useTranslation(); で実装しようとしました。 (i18nextのinitは別のとこでやってるので省略) useTranslation(); まずは親になるMyComponentがこちら import React from 'react'…

Warningが気になったので修正していきます。 Warning: A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from co…

普通に引数が無い場合は、 clicked() { console.log('click!!'); } render () { <div> <a onClick={clicked}>リンク</a> </div> } これで、クリックした時にclicked…

前に作ったMessageクラスですが、、 var Message = React.createClass({ render: function() { return ( <div className="message"> <h2 className="…