[reactjs] タグが付いた質問

Reactはユーザーインタフェースを組み立てるためのJavaScriptライブラリです。宣言的なパラダイムによって、あなたのアプリケーションがどう動作しているかをわかりやすくすると共に、効率が良くかつ変更を容易にすることを目標としています。

絞り込み
並べ替え
タグ付けされた
0
1 回答
604 閲覧数

firebaseから取得したデータをReact内のjsxで表示できない

firebaseから取得したデータをreact componentで表示したいのですがundefinedが返され上手く表示されません。ライフサイクルの観点から上手くデータが同期されていない様に思うのですが、どなたかご教示いただく事は出来ないでしょうか。 class Grammer extends React.Component { state = { ...
0
1 回答
839 閲覧数

Next.jsのgetStaticPaths内でParamsを参照できますでしょうか

最近Next.jsを個人で触り始め、現在Next.js Ver9.3.5でネストした動的ルーティングを実装しようとしています。 やりたいこと やりたいことは /tokyo/shinjuku/ のようなページでの getStaticPathsの動的な実装です。 フォルダ構造は以下のようです。 [prefecture_name_e]/index.jsでは動的である必要がなかったため[...
  • 25
0
1 回答
2,388 閲覧数

React (TypeScript) のHookでFunctionComponentをCurry化しようとするとエラーになります

ボタンの種類を渡す関数と、通常のHookのFunctionComponentの関数をカリー化しようとしたのですが、VSCodeのLintから以下のエラーメッセージが表示されます。 エラーメッセージ (type: string) => (props: Props) => JSX.Element' を型 'FC<Props>' に割り当てることはできません。 パラメーター '...
  • 7
0
1 回答
686 閲覧数

electronにてwebpackでソースのビルドが成功しているのに何も表示されない

electron reactにてwebpackでソースのビルドが成功しているのに何も表示されない いろいろ調べたりして直したのですがどこが間違っているのかどんどんわからなくなってきました 参考資料として「ソシム株式会社 いまどきJSプログラマーのための Node.jsとReactアプリケーション開発テクニック」を読んでます main.js const electron = require(&...
0
1 回答
422 閲覧数

TSXでリストを動的に作るには

動的に配列を作り、状況に応じてその配列の個数が変動します。 その配列の要素から必要な要素を取り出してHTMLのでリストとして表示するにはどうしたら良いでしょう? 書き方はTypeScriptを用いて、TSXで書いています。以下、イメージです: const sample (index: number) => { const sampleList: number[] = []; for (...
5
1 回答
1,492 閲覧数

text/babel とはなんですか?

Reactのドキュメントを読み始めました。 Getting Started – React に 自前のテキストエディタを使いたい場合は、この HTML ファイルをダウンロード・編集して、ブラウザを使ってからローカルファイルシステムから開くことができます。ランタイムでの遅いコード変換が行われる為、簡単なデモに留めておくことをおすすめします。 とあるので、「このHTMLファイル」...
0
1 回答
2,068 閲覧数

reactでHTMLDivElementを取得したい

<div>1</div> の1をreactjsを使って取得したいです。 純javascriptであれば、getelementbyidから簡単に取得できますが、reactの場合どのプロセスを辿って取得することになりますか? functionコンポーネントでrefを使い実現したいです。
  • 11
0
1 回答
312 閲覧数

SPAにおいてレスポンスパフォーマンスを損なわずにSSRのエラーハンドリングをする方法を模索しています

StackOverflow本家にも質問を投げていますが、回答がつかないのでこちらでも質問させてください。 もし有用な回答があった場合は両方に反映させます。 用語 SPA = Single Page Application SSR = Server Side Rendering 実現したいこと expressとReactでSSRを実装した時、レンダリング中にエラーが投げられたとします。 ...
  • 1,352
1
1 回答
642 閲覧数

umd形式でのみ提供されているブラウザ用ライブラリのReactによる動的読み込みとその完了検知の方法

React.js を用いて Web サイトを開発しています。 モジュール形式で提供されていない、<script> タグで読みこんでグローバルオブジェクト(window)に追加されたオブジェクトを利用するタイプの外部スクリプトを、React.js でうまく扱う方法についての質問です。 たとえば、決済代行業者 PAY.JP が提供する payjp.js はまさにそのパターンで、素の ...
0
0 回答
174 閲覧数

React redux componentでglobal stateをinput値として使用していますがinputで入力できない

componenntでglobal stateを使って表示しているですが、画面上にそのinputの値が変えられない。 値を変えるために新しいactionを発行してinputのonChangeとbindすると変更できるようになりましたが、 これではinputごとに新しいactionを作らないといけないことになるのでこういうやり方では違う気がします。 以下はcomponent PlayerData....
  • 1
1
0 回答
68 閲覧数

react typescript materialUIを使ったスタイルの当て方

環境 ・reactとTypescriptを使っています ・デザインはmaterial UIを使っています。 ・スタイルlはstyled-componentsで当てています。 わからないこと Material UIからText Fileldをimportしてきてstyled-componetsを使ってスタイルを当てました。 しかし下記のようなエラーが出てしましました。 ...
  • 111
0
1 回答
475 閲覧数

ReactでSoundJSを使う

質問内容 Reactを使ってSoundJSを使いたいのですが、エラーが出てしまいます。 また、音楽ファイルの読み込みにPreloadJSを使っています。 エラーの内容がよくわからないので教えていただけると幸いです。 Reactを使わない生JSでかくと動きます。 エラー文 Uncaught Error: The error you provided does not contain a stack ...
0
0 回答
651 閲覧数

create-react-app 原因不明のエラー ERR! Maximum call stack size exceeded

前提・実現したいこと create-react-app の実行時にエラーが発生しており、解決できません... 8時間ほどかけて試行錯誤しましたが、挫折してしまいました... ご教授願います。。。 発生している問題・エラーメッセージ node -e "try{require('./postinstall')}catch(e){}" npm ERR! Maximum call stack ...
0
1 回答
1,167 閲覧数

position: sticky; しているheaderのz-indexが効かない。

概要 現在、GatsbyJSでWebサイトを作っていますが、CSSの重なり順で詰まってしまいました。 具体的には、headerをposition sticky; top: 0;で最上部に固定し、そのheaderはページ共通にするためにlayoutコンポーネントに入れています。また、その一つ下に<main>{children}</main>の様にして、...
  • 27
1
1 回答
1,215 閲覧数

Reactのイベントハンドラに引数を渡す場合について

質問 React公式ガイドの6.イベント処理の最後の項目に以下のようなコードがありました。 ループ内では、イベントハンドラに追加のパラメータを渡したくなることがよくあります。例えば、id という行の ID がある場合、以下のどちらでも動作します: <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</...
1
1 回答
738 閲覧数

Reactにおけるファイル間の値のやり取り

初めてのReact「入門編」導入から基本まで〜TODOアプリを作ってを学ぼう! を参考にTODOアプリを作成しようとしています。 以下のようにHome.js,todo.js,add.jsのように機能ごとに分けたいです。その際add.js内においてボタンがクリックされた際にtodo.js内のstateに値を渡したいのですが、どのようにすればよいでしょうか。 よろしくお願いします。 Home.js ...
1
0 回答
73 閲覧数

Reactで発見した波括弧を使う代入文がどのように動作するのかわからない [重複]

const {id} = this.props.match.params react入門者です 変数代入について このコードの結果はわかるのですが、どのように処理されて結果 idという変数にpropsのidを拾ってきて代入しているのかわからないです reactの機能ですか? reduxでしょうか?
0
1 回答
4,505 閲覧数

「プロパティ 'value' は型 'HTMLElement' に存在しません」というエラーを解決したいです。

前提 Jest React-Testing-Library 上記2つのライブラリを用いて、react-create-appで制作したアプリの単体テストを書いています。 テストの内容は、「クリアボタンを押すことで、input type="number"フォームの入力値をクリアできるか」を検証するテストです。 下記がそのテストコードです。 ソースコード // 略 fireEvent....
  • 169
0
1 回答
166 閲覧数

React 共通処理でstateを変えたい

on/offを切り替えるswitchがあり、切り替えるときにchangeState関数が呼ばれます。 引数として渡されるkeyの中身は{numberState: true}の形で渡されます。 渡された値でstateを変えたいのですがうまくいきません わかる人がいましたら教えて欲しいです。よろしくお願いします。 コンポーネントはmaterialUIを使っています interface IState ...
  • 1
0
0 回答
320 閲覧数

Docker Reactコンテナを起動するにはどうすればいいでしょうか?

DockerでReact環境を構築しています。 1つ目は問題なく作成することができましたが、2つ目がなぜができません。 実行環境 Windows10 Home Docker(Toolbox) コンテナ 1つ目: node_app_1 (-p 3000:3000) 2つ目: react-flux_app_1 (-p 3001;3000) docker-compose version: '3' ...
  • 375
0
1 回答
87 閲覧数

javascriptの時間表示を変えたい

現在reactでコードを書いています。 axiosでもらってきたjson形式のデータを表示させています。 ここの画像で2020-03-18までを表示させたいのですがjsonの情報自体に時間も含まれているのでどう表示させたらいいかわかりません。javascriptのgetmonthなど試してみたのですが上手く表示されなかったため、どなたか教えていただけますでしょうか。 <TableCell &...
  • 103
0
1 回答
234 閲覧数

特定のルートのみReact(JavaScript)からLumen(PHP)へAjaxをした際にCORSで弾かれる。

概要 現在下記の様な構成のアプリケーションを開発しています。 フロントエンドにReact.js、バックエンドにAPIサーバーのLumen、その間にリバースプロキシとしてNginxを置いています。 そこで、ReactからPromiseベースのAjaxライブラリであるaxiosを使ったところCORSで弾かれました。 Lumen側でCORSの設定をし、一応は回避することはできたのですが、...
  • 27
1
0 回答
613 閲覧数

react nativeでpretterとeslintを使用するときのコード整形について

解決したいこと 拡張子.jsで書くreact nativeのpretterとeslintでのコード整形について typescriptで書くときに悩まされる下記のerrorについて 前提 react native を書いています。コード整形でpretterとeslintを使用しています。 問題 ここでうまく行かないことがあります。 ファイルの拡張子を.js でreact ...
  • 11
1
1 回答
685 閲覧数

typeやinterfaceを使用せず、複数ある引数に型を付与したい。

typeやinterfaceを使用せず、複数ある引数に型を付与しする方法をご教示いただけないでしょうか。 下記は子コンポーネントにstateとsetStateを渡しているデモです。 demo デモでは子コンポーネントの引数の型はtypeで記述しています。 引数が複数の場合かつ少ない場合だとtypeやinterfaceで定義するのは冗長かと思い、...
0
1 回答
487 閲覧数

ReactのJSX内でmap()を使用した際のエラー

概要 現在、React + Pusherでリアルタイムのチャット機能を実装していますが、jsxの部分で下記のエラーが発生しました。 具体的には、取得した全メッセージの内容をjsx内でmap()を使用して表示しているのですがそこでエラーが発生しています。 自分なりに色々調べてArray.from()でオブジェクトを配列に変換しましたが、解決せず…。 どなたか解決方法のご教授お願い致します。 <...
  • 27
0
1 回答
530 閲覧数

TypeScriptのmap()を使用した際のkeyエラー

概要 現在、TypeScript + React + Material-UIを用いた開発を行っています。 その中でオブジェクトをmap()で回して表示しているのですが、下記の様なエラーが発生いたしました。 差分表示の際にユニークなkeyを使用した方がパフォーマンスがよくなるということは理解しているのですが、何か勘違いをしているのか、中々エラーが消えてくれません。 ...
  • 27
0
1 回答
1,610 閲覧数

TypeScript+React構成におけるMaterial-UIの型エラー

概要 現在、React + TypeScript + Material-UIを用いた開発を行っていますが、エラーが発生致しました。Material-UIのCSS in JSを用いているのですが、その中のtoolbarで下記の様なエラーが発生致しました。TSの型エラーだということは分かるのですが、解決方法は分からず…。 自分なりに色々調べてみましたが、問題に該当する記事が見つけられませんでした…。 ...
  • 27
0
1 回答
305 閲覧数

React Hooks で State を変更しても再レンダーされない。

住所などの入力ホームにて、郵便番号を入力するとリアルタイムで関連する住所を返してくれるPostcodeJP APIを利用しているのですが、stateが変更されてもレンダーされず、前の値のままになる。 例 郵便番号の欄に 8701121 を入力すると 本当の住所は大分県・大分市・鴛野ですが、大分県・大分市しか表示されず、入力を87011210などに変えると、鴛野まで表示される。 問題のサイト ...
0
1 回答
1,657 閲覧数

Material-UIのmakeStyles関数でコンパイルエラーが発生する

概要 現在、React+TypeScriptを利用して開発を行っていますが、エラーが発生致しました。 Material-UIのCSS in JSでmakeStyles()を用いているのですが、その引数のthemeで下記の様なエラーが発生いたしました。 開発はDocker上で行っているのですが、元々は下記の様なエラーは発生していませんでした。しかし、docker-compose up -...
  • 27
4
1 回答
127 閲覧数

React で prop 受け渡しの shorthand はありますか?

例えば Component の extra という props を固定したコンポーネントを作るときに const HogeComponent = props => <Component {...props} extra='hoge' /> と書けますが、以下のように省略して書く方法はありますか? const HogeComponent = Component.bind({ ...
  • 53
0
1 回答
408 閲覧数

ReduxのReducerの3次元配列の更新が上手くいきません

概要 現在、TypeScript+React+Redux+Go+gRPCを用いた個人開発を行っています。 そこで、gRPCで受け取った3次元配列のレスポンスをReducerに記述したいのですが、そこで今悩んでいます。 具体的には3次元配列の値をinitialStateにコピーする方法がわかりません。通常の一次元ならば記述できますので、配列を崩してReducerを複数作ることも考えたのですが、...
  • 27
2
1 回答
6,269 閲覧数

Reactでinput type="text"のvalueをボタンを押すことでリセットしたい。

Reactでテキストフォームをリセットする方法をご教示いただけないでしょうか。 下記は動作デモです。 demo テキストフォームに「ok」を入力し「check」ボタンを押すことで"ok"というアラートが表示されます。 テキストフォームに「ok」以外を入力し「check」ボタンを押した場合は、"no"というアラートが表示されます。 デモにおいて、「clear」ボタンを押すことで、...
  • 169
0
1 回答
388 閲覧数

gRPC+Go+React+TypeScript における Connect error

概要 現在、勉強の為にgRPC+Go+React+TypeScriptを用いた個人開発を行っています。 ReactとGoの間にはEnvoy Proxyを置いています。 gRPCは初めてということもあり、新規会員登録機能においてgRPCの接続テストを行っています。 具体的には、新規会員登録機能にアクセスするとgRPCでリクエストを送り、それに対するレスポンスをReact側でconsole....
  • 27
1
1 回答
363 閲覧数

React + Reduxにおけるdispatch時のエラー

React + Reduxにおけるdispatch時のエラー 概要 現在、TypeScript + React + Reduxを用いた開発を行っています。 仮のログアウト機能を実装中にエラーが発生しました。 具体的には、actionをdispatchした際にエラーが発生します。 どうやら下記のjwtLogout内のdispatchで発生している様です。 自分なりに色々調べてみましたが, ...
  • 27
0
1 回答
366 閲覧数

React + TypeScriptでのコンポーネントのエラー

React + TypeScriptでのコンポーネントのエラー 概要 現在、TypeScript + Reactで開発中ですが、下記の様なエラーが発生いたしました。 エラーの意味と該当箇所は恐らく分かっています。 具体的には、<Icon />でundefinedをコンポーネントとして描画しようとしている為なのかなと…。 しかし、それを解決する方法が分かりません。 ...
  • 27
0
1 回答
745 閲覧数

React Typescript 関数の引数の書き方

前提・実現したいこと 親コンポーネントで子コンポーネントに渡す関数を定義したいのですが、引数をどう書いたらいいのかがわかりません。 わかる人がいたら教えて欲しいです 該当のソースコード **types.ts** export type Task { id: number text: string done: boolean } //親コンポーネント import React, {...
1
1 回答
236 閲覧数

Reactのstateに格納するデータは表示に関係するものだけを格納するべきなのでしょうか?

現在Reactを使っているのですが、stateに格納するデータは表示に関係するものだけ入れるべきなのでしょうか? なぜこのような質問をするかというと、私が調べた限りsetStateで値を設定した場合、再描画が走るという認識です。 であれば設計方針としては、描画に直接的に関係ないデータはstateに格納するのではなく、インスタンス変数などに格納するべきなのでしょうか? ...
0
3 回答
2,113 閲覧数

ReactのPropsに渡された時の再描画についての疑問

こんにちは。 React の props 更新に対しての再描画処理について よい実装について教えてください。 次のサンプルを作りました。 私には動きそうに見えたのですが動きませんでした。 問題は、グローバルに定義した counterCount の値は修正されるのですが それに応じて コンポーネント内の this.props.count が更新されない というものです。 ...
0
1 回答
464 閲覧数

React.jsでコメントアウトができずアロー関数を使った表示ができない

React.jsでアロー関数を使って表記リストを表示しようとしています。 参考書『React.js & Next.js超入門』に掲載されていたプログラムで Webでサンプルコードのダウンロードができるようなのですが、zipファイルの解凍でエラーが出て見れない状態です。 問題 ①React.js部分は、Javaスクリプトなので、以下の記事を参考にすると{// }...
  • 421
1
1 回答
266 閲覧数

React Hooksの繰り返し内での使用

React Hooksはifやforの内部では使用できないという制約があります。 そうすると、検索結果を一覧表示するようなテーブルの行の中ではReact Hooksを一切使用できないということになるのでしょうか。 テーブルの各行がコンポーネントになっている場合、各行に表示するデータおよびそれを更新するための関数を与えるためにはprops経由で渡す必要があるのでしょうか。
  • 77
0
1 回答
1,864 閲覧数

ReactをimportしようとするとSyntaxError

Reactをimportしようとして、node {ファイル名} を実行した際にエラーが発生してしまいます。 ネットで調べた結果、transpileをしなくてはいけないのはわかったのですが、transpileの仕組みと仕方がわかりません。どなたか教えていただけないでしょうか? MacのTerminalを使っています。お願いします。 Javascriptのファイル: import React ...
1
1 回答
184 閲覧数

react.jsで作ったコンポーネントの動作がスマホのchromeだけ違う

reactの練習で、create-react-appで作成したアプリのapp.jsを書き換えたり、簡単なコンポーネントを作って読み込んで動かしたりしています。 NumberOfGamesコンポーネントが入力欄、PrintBasicInfoコンポーネントが入力内容表示部分、 入力欄に入力(あるいは削除)する度にstate.placeが書き換えられて表示部分も変化する。 App....
1
2 回答
2,667 閲覧数

react functional component 再レンダーされない

react のhooksを使ってsetStateを呼びだしたときに、再レンダリングが走りません。 なぜでしょうか? todoアプリのdeleteを押したときに、stateの値は更新されているようですが、再描画が走りません。 stateには配列を入れて、更新をしているはずなのですが。。 以下、コードです。 // app.txs const App = () =>{ const [todo, ...
0
1 回答
7,026 閲覧数

何故「Uncaught Invariant Violation: Maximum update depth exceeded.」というエラーが出るのかわかりません。

現在reactを使ってフロントエンドの開発をしているのですが、Uncaught Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. ...
0
1 回答
8,119 閲覧数

webpackのビルドをしても,ローカルの開発環境でエラーが出てしまいブラウザに何も表示されません

質問の主旨 現在、Reactを勉強中で本を読み進めてチャットアプリを作成しています。ですが、webpackのコンパイルでよく理解できないエラーが出てしまいうまくいきません。 ブラウザは立ち上がるのですが、画面が白いまま、エラーが出ます。 初心者なので、webpack周りのエラーのことを調べてみても結局よくわからないままです。 開発環境は以下の通りです。 インストールしたライブラリ Node....
user avatar
0
1 回答
722 閲覧数

JSXで配列をループで回して2個ごとにdivで纏めたい

現在、特定の要素が集まった集合があり、それをループで回して2個の要素毎にdivで纏めたいです。 完成形のHTMLの例を挙げると以下の様な感じです。 <div class="row"> <div class="hoge"/> <div class="hoge"/> </div> <div class="row">...
2
1 回答
553 閲覧数

TypeScriptのgenericsを使ったReactコードのコンパイルが通らなくて困っています

再現コードは最小限にシンプルにしたので、意味自体はありません。 interface TextProps { data: { text: string }; } interface ObjProps { data: object; } const Para: React.FC<TextProps> = ({ data }) => <p>{data.text}</...
0
1 回答
2,514 閲覧数

Javascript(React)でCorsエラーが発生していますが、解決方法を教えてもらいたいです。

お疲れ様です。 Javascriptにてfetch文(非同期)を利用し、Jsonを取得しようとしていますが、 CORSエラーになりました。 以下のQnAを参照して、下記のコードにしているんですが、 (https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-...
5
1 回答
2,594 閲覧数

なぜReactを実行するときlocalhostのサーバーが必要ですか?

create-react-appのGetting Startをよんでいたところ、npm startでlocalhostサーバーが立ち上がるようでした https://facebook.github.io/create-react-app/docs/getting-started https://facebook.github.io/create-react-app/docs/deployment ...
1
0 回答
908 閲覧数

react,material-uiのselectにて、labelと要素が重なって表示される

以下のような形で、reactにてmaterial-uiを使用し、セレクトボックスを作成しています。 しかし、labelとセレクトボックス内の要素が重なって表示されてしまいます。 どのような観点で修正を実施すればよいかご教示いただければ幸いです。 componentWillMount() { navigator.mediaDevices.enumerateDevices()....
  • 37