[reactjs] タグが付いた質問
Reactはユーザーインタフェースを組み立てるためのJavaScriptライブラリです。宣言的なパラダイムによって、あなたのアプリケーションがどう動作しているかをわかりやすくすると共に、効率が良くかつ変更を容易にすることを目標としています。
253
質問
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では動的である必要がなかったため[...
0
票
1
回答
2,388
閲覧数
React (TypeScript) のHookでFunctionComponentをCurry化しようとするとエラーになります
ボタンの種類を渡す関数と、通常のHookのFunctionComponentの関数をカリー化しようとしたのですが、VSCodeのLintから以下のエラーメッセージが表示されます。
エラーメッセージ
(type: string) => (props: Props) => JSX.Element' を型 'FC<Props>' に割り当てることはできません。
パラメーター '...
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を使い実現したいです。
0
票
1
回答
312
閲覧数
SPAにおいてレスポンスパフォーマンスを損なわずにSSRのエラーハンドリングをする方法を模索しています
StackOverflow本家にも質問を投げていますが、回答がつかないのでこちらでも質問させてください。
もし有用な回答があった場合は両方に反映させます。
用語
SPA = Single Page Application
SSR = Server Side Rendering
実現したいこと
expressとReactでSSRを実装した時、レンダリング中にエラーが投げられたとします。
...
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
票
0
回答
68
閲覧数
react typescript materialUIを使ったスタイルの当て方
環境
・reactとTypescriptを使っています
・デザインはmaterial UIを使っています。
・スタイルlはstyled-componentsで当てています。
わからないこと
Material UIからText Fileldをimportしてきてstyled-componetsを使ってスタイルを当てました。
しかし下記のようなエラーが出てしましました。
...
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>の様にして、...
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....
0
票
1
回答
166
閲覧数
React 共通処理でstateを変えたい
on/offを切り替えるswitchがあり、切り替えるときにchangeState関数が呼ばれます。
引数として渡されるkeyの中身は{numberState: true}の形で渡されます。
渡された値でstateを変えたいのですがうまくいきません
わかる人がいましたら教えて欲しいです。よろしくお願いします。
コンポーネントはmaterialUIを使っています
interface IState ...
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'
...
0
票
1
回答
87
閲覧数
javascriptの時間表示を変えたい
現在reactでコードを書いています。
axiosでもらってきたjson形式のデータを表示させています。
ここの画像で2020-03-18までを表示させたいのですがjsonの情報自体に時間も含まれているのでどう表示させたらいいかわかりません。javascriptのgetmonthなど試してみたのですが上手く表示されなかったため、どなたか教えていただけますでしょうか。
<TableCell &...
0
票
1
回答
234
閲覧数
特定のルートのみReact(JavaScript)からLumen(PHP)へAjaxをした際にCORSで弾かれる。
概要
現在下記の様な構成のアプリケーションを開発しています。
フロントエンドにReact.js、バックエンドにAPIサーバーのLumen、その間にリバースプロキシとしてNginxを置いています。
そこで、ReactからPromiseベースのAjaxライブラリであるaxiosを使ったところCORSで弾かれました。
Lumen側でCORSの設定をし、一応は回避することはできたのですが、...
1
票
0
回答
613
閲覧数
react nativeでpretterとeslintを使用するときのコード整形について
解決したいこと
拡張子.jsで書くreact nativeのpretterとeslintでのコード整形について
typescriptで書くときに悩まされる下記のerrorについて
前提
react native を書いています。コード整形でpretterとeslintを使用しています。
問題
ここでうまく行かないことがあります。
ファイルの拡張子を.js でreact ...
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()でオブジェクトを配列に変換しましたが、解決せず…。
どなたか解決方法のご教授お願い致します。
<...
0
票
1
回答
530
閲覧数
TypeScriptのmap()を使用した際のkeyエラー
概要
現在、TypeScript + React + Material-UIを用いた開発を行っています。
その中でオブジェクトをmap()で回して表示しているのですが、下記の様なエラーが発生いたしました。
差分表示の際にユニークなkeyを使用した方がパフォーマンスがよくなるということは理解しているのですが、何か勘違いをしているのか、中々エラーが消えてくれません。
...
0
票
1
回答
1,610
閲覧数
TypeScript+React構成におけるMaterial-UIの型エラー
概要
現在、React + TypeScript + Material-UIを用いた開発を行っていますが、エラーが発生致しました。Material-UIのCSS in JSを用いているのですが、その中のtoolbarで下記の様なエラーが発生致しました。TSの型エラーだということは分かるのですが、解決方法は分からず…。
自分なりに色々調べてみましたが、問題に該当する記事が見つけられませんでした…。
...
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 -...
4
票
1
回答
127
閲覧数
React で prop 受け渡しの shorthand はありますか?
例えば Component の extra という props を固定したコンポーネントを作るときに
const HogeComponent = props => <Component {...props} extra='hoge' />
と書けますが、以下のように省略して書く方法はありますか?
const HogeComponent = Component.bind({ ...
0
票
1
回答
408
閲覧数
ReduxのReducerの3次元配列の更新が上手くいきません
概要
現在、TypeScript+React+Redux+Go+gRPCを用いた個人開発を行っています。
そこで、gRPCで受け取った3次元配列のレスポンスをReducerに記述したいのですが、そこで今悩んでいます。
具体的には3次元配列の値をinitialStateにコピーする方法がわかりません。通常の一次元ならば記述できますので、配列を崩してReducerを複数作ることも考えたのですが、...
2
票
1
回答
6,269
閲覧数
Reactでinput type="text"のvalueをボタンを押すことでリセットしたい。
Reactでテキストフォームをリセットする方法をご教示いただけないでしょうか。
下記は動作デモです。
demo
テキストフォームに「ok」を入力し「check」ボタンを押すことで"ok"というアラートが表示されます。
テキストフォームに「ok」以外を入力し「check」ボタンを押した場合は、"no"というアラートが表示されます。
デモにおいて、「clear」ボタンを押すことで、...
0
票
1
回答
388
閲覧数
gRPC+Go+React+TypeScript における Connect error
概要
現在、勉強の為にgRPC+Go+React+TypeScriptを用いた個人開発を行っています。
ReactとGoの間にはEnvoy Proxyを置いています。
gRPCは初めてということもあり、新規会員登録機能においてgRPCの接続テストを行っています。
具体的には、新規会員登録機能にアクセスするとgRPCでリクエストを送り、それに対するレスポンスをReact側でconsole....
1
票
1
回答
363
閲覧数
React + Reduxにおけるdispatch時のエラー
React + Reduxにおけるdispatch時のエラー
概要
現在、TypeScript + React + Reduxを用いた開発を行っています。
仮のログアウト機能を実装中にエラーが発生しました。
具体的には、actionをdispatchした際にエラーが発生します。
どうやら下記のjwtLogout内のdispatchで発生している様です。
自分なりに色々調べてみましたが, ...
0
票
1
回答
366
閲覧数
React + TypeScriptでのコンポーネントのエラー
React + TypeScriptでのコンポーネントのエラー
概要
現在、TypeScript + Reactで開発中ですが、下記の様なエラーが発生いたしました。
エラーの意味と該当箇所は恐らく分かっています。
具体的には、<Icon />でundefinedをコンポーネントとして描画しようとしている為なのかなと…。
しかし、それを解決する方法が分かりません。
...
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スクリプトなので、以下の記事を参考にすると{// }...
1
票
1
回答
266
閲覧数
React Hooksの繰り返し内での使用
React Hooksはifやforの内部では使用できないという制約があります。
そうすると、検索結果を一覧表示するようなテーブルの行の中ではReact Hooksを一切使用できないということになるのでしょうか。
テーブルの各行がコンポーネントになっている場合、各行に表示するデータおよびそれを更新するための関数を与えるためにはprops経由で渡す必要があるのでしょうか。
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....
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()....