Kotlin/JS React Tips集

useStateと委譲プロパティ

useStateはKotlnの分割宣言を用いて

val (count, setCount) = useState(0)

のようにも書けますが、委譲プロパティを用いて

var count by useState(0)

とも書けます。

TextFieldのvalueが取得できない

Eventをキャストする必要があるみたいです。また、asでキャストするとIDEに怒られるのでunsafeCastを使うといいです。

TextField {
    onChange = {
        val event = it.unsafeCast<ChangeEvent<HTMLInputElement>>()
    }
}

CSSの単位指定

pxやcm,mmなどの単位はLength.ktにNumberの拡張関数として定義されていますが、%がありません。%を指定するにはPercentage.ktに定義されているNumber.pctを使う必要があります。

style = jso {
    // 100%
    width = 100.pct 
}

MUI Gridのブレークポイント

何故かGridPropsにはブレークポイントを設定するプロパティが存在しません。なので作りましょう。

inline var GridProps.xs: Any?
    get() {
        return asDynamic().xs
    }
    set(value) {
        asDynamic().xs = value
    }

ReactNodeにComponentを入れたい

コンポーネントのcreateメソッドを呼び出すことでReactNode型のプロパティにComponentを渡せます。

BrowserRouter {
    Routes {
        Route {
	    path = "/"
	    element = App.create()
	    }
    }
}