rectでdomの参照はrefを使う
例えば、次のようにrefを受け取って該当箇所に接続したりする。 react.dev
アニメーション
サイズが変わるときとかにつかえる。
HTMLコンポーネントを見えることろまでスクロール
scroolIntoViewでいける 親はoverflowさせておく？
useLayoutEffect
同期で実行される。
セレクタの練習
htmlを
<html> <head> <link rel="stylesheet" href="sample.css"/> </head> <body> <div class="root"> 根っこ <div class="sub"> 根っこの子供 <div class="subsub"> 根っこの子供の子供 </div> <div class="poge"> 根っこの子供の子供2 </div> </div> <div class="poi"> 根っこの子供2 </div> <div class="poi2"> 根っこの子供3 </div> </div> <div class="tonari"> 根っこの隣 </div> </body> </html>
とする。
cssとして
.root { background-color: red; padding: 30px; } .root > div { padding: 0px 50px; } .root > div > div { background-color: indigo; } div:not([class*="sub"]) { font-size: 50px; } div[class*="sub"] { font-size: 5px; } .sub::first-line { color: yellow; } .poge::after { content: "!"; color: plum; } div:nth-child(3) { color: purple; background-color: greenyellow; }
などが使える。ダサいページができる。
spyonのimport
同一ファイル内にある
function funcA() : B { return funcB()} function funcB() : B { ... }
においてfuncBをモックにしてfuncAを呼んでもモックが呼ばれない。
import * as thisModule from "./funcA" function funcA() : B { return thisModule.funcB()} function funcB() : B { ... }
とすると呼ばれる。つらい。
値を消す
function removeValueSubOrder<T, K extends keyof T, P extends keyof T[K]>(
target: T,
subOrder: K,
keys: P[]
): T {
const obj = { ...target } as any
for (const key of keys) {
obj[subOrder][key] = undefined
}
return obj as T
}
function removeValue<T, K extends keyof T>(target: T, keys: K[]): T {
const obj = { ...target } as any
for (const key of keys) {
obj[key] = undefined
}
return obj as T
}
jest mock
関数のモック
import * as Utils from "hogehoge"
jest.mock("hogehoge")
jest
.spyOn(Utils, "hogeFunc")
.mockReturnValue(exampleValue)
置き換え
作ってみた。
const replace: <T, S extends T>(
list: T[],
condition: (ob: T) => ob is S,
callback: (ob: S) => T
) => T[] = (list, condition, callback) =>
list.map(t => (condition(t) ? callback(t) : t))
Gridを独自コンポーネントにする
(props) => react.componentにするだけで使えるようになる。
const useStyles = (theme: Theme) => { return makeStyles({ root: { flexGrow: 1 }, paper: { padding: theme.spacing(2), textAlign: 'center', color: theme.palette.text.secondary } }) } const Conainer = (props:any) => <Grid container {...props}/> const Item = (props:any) => <Grid item {...props}/> const UnderStandingBreakpoints2 = () => { const theme = useTheme() const classes = useStyles(theme)() return ( <div className={classes.root}> <Conainer spacing={4}> <Item xs={12} sm={6} md={3}> <Paper className={classes.paper}> xs = 12 sm = 6 md = 3 </Paper> </Item> <Item xs={12} sm={6} md={3}> <Paper className={classes.paper}> xs = 12 sm = 6 md = 3 </Paper> </Item> <Item xs={12} sm={6} md={3}> <Paper className={classes.paper}> xs = 12 sm = 6 md = 3 </Paper> </Item> <Item xs={12} sm={6} md={3}> <Paper className={classes.paper}> xs = 12 sm = 6 md = 3 </Paper> </Item> </Conainer> </div> ) }; export default UnderStandingBreakpoints2
Gridにスタイルをあてる
makeStylesを使う。
const useStyles = (theme:Theme) => { return makeStyles({ root: { flexGrow: 1 }, paper: { padding: theme.spacing(2), textAlign: 'center', color: theme.palette.text.secondary } }) }
これをuseStyleしてやればよいだけ。
const UnderStandingBreakpoints = () => { const theme = useTheme() const classes = useStyles(theme)() return ( <div className={classes.root}> <Grid container spacing={4}> <Grid item xs={12} sm={6} md={3}> <Paper className={classes.paper}> xs = 12 sm = 6 md = 3 </Paper> </Grid> <Grid item xs={12} sm={6} md={3}> <Paper className={classes.paper}> xs = 12 sm = 6 md = 3 </Paper> </Grid> <Grid item xs={12} sm={6} md={3}> <Paper className={classes.paper}> xs = 12 sm = 6 md = 3 </Paper> </Grid> <Grid item xs={12} sm={6} md={3}> <Paper className={classes.paper}> xs = 12 sm = 6 md = 3 </Paper> </Grid> </Grid> </div> ) }; export default UnderStandingBreakpoints
サイズは
xs>0px sm>=600px md>=960px lg>1280px xl>1920px
で適応される。画面全体は12分割されそのうちどのわりあいになるかを指定している。
UITextViewでAttributeTextが改行されない
let style = NSMutableParagraphStyle()
style.lineBreakMode = .byWordWrapping
してaddAttributeする。
セルの高さが自動設定されない
セルのコンテンツビュー内で高さと上下の設定をきちんといれてないとそうなる。
