- 投稿日:2020-01-17T23:06:48+09:00
TypeScript+ReactでCSSにtextAlignを使う
以下のように指定してあげればOK。
毎回これで書くのも面倒なのでいい感じの方法が知りたい。textAlign: "center" as "center"参考記事
TypeScript type inference issue with string literal - Stack Overflow https://stackoverflow.com/questions/43121661/typescript-type-inference-issue-with-string-literal/43124412
- 投稿日:2020-01-17T22:12:59+09:00
[React] makeStyles / createStyles の使い方
makeStyles,
createStyles
をimportし、useStylesを定義import { makeStyles, createStyles } from '@material-ui/core/styles'; //style関連のimport const useStyles = makeStyles((theme) => createStyles({ //useStylesを定義 card: { margin: theme.spacing(5), padding: theme.spacing(3), }, })); function Home() { const classes = useStyles(); //コンポーネント内でuseStylesを使用し、classesを定義classesをreturnの中のjsxで使用する
return ( <div className="container"> <div className="row justify-content-center"> <div className="col-md-8"> <div className="card"> <h1>タスク管理</h1> <Card className={classes.card}> //return内でstyleを呼び出す以上、備忘録
ReactではComponentごとにstyleを定義するのが一般的かと思います。
- 投稿日:2020-01-17T20:30:01+09:00
【Next.js/Nuxt.js】Nuxt.jsで言うfetch()やasyncData()のNext.js版→getInitialProps()
Next.jsのgetInitialProps()
Next.jsでも、Nuxt.jsで言うところのfetch()またはasyncData()にあたる処理を見つけました。
getInitialProps(context)
です。詳しくは、getInitialProps | 公式サイト(英語)に記載があります。
画面表示前にfetchができるとのことです。※もし認識に誤りがある場合はコメント頂けるとありがたいです。
説明
getInitialProps()の引数は、Context Object | 公式サイト(英語)です。
jsxの
this.props
にgetInitialProps()
でreturnしたオブジェクトのプロパティが入ってきます。以下は、上記の公式サイトより簡素に書き直したものです。
import React from 'react' class Page extends React.Component { // 引数「context」については上述 static async getInitialProps(context) { return { name: 'Hanako' } } render() { // this.propsにプロパティ「name」が入ってくる return <div>Name is {this.props.name}</div> } } export default Page参照URL
- 投稿日:2020-01-17T20:30:01+09:00
【Next.js/Nuxt.js】Nuxt.jsで言うasyncData()のNext.js版→getInitialProps()
Next.jsのgetInitialProps()
Next.jsでも、Nuxt.jsで言うところのasyncData()にあたる処理と思われる処理を見つけました。
getInitialProps(context)
です。詳しくは、getInitialProps | 公式サイト(英語)に記載があります。
画面表示前にfetchができるとのことです。※もし認識に誤りがある場合はコメント頂けるとありがたいです。
説明
getInitialProps()の引数は、Context Object | 公式サイト(英語)です。
jsxの
this.props
にgetInitialProps()
でreturnしたオブジェクトのプロパティが入ってきます。以下は、上記の公式サイトより簡素に書き直したものです。
import React from 'react' class Page extends React.Component { // 引数「context」については上述 static async getInitialProps(context) { return { name: 'Hanako' } } render() { // this.propsにプロパティ「name」が入ってくる return <div>Name is {this.props.name}</div> } } export default Page参照URL