20200117のReactに関する記事は4件です。

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

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

[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を定義するのが一般的かと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【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.propsgetInitialProps()で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

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【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.propsgetInitialProps()で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

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む