[reactjs] タグが付いた質問
Reactはユーザーインタフェースを組み立てるためのJavaScriptライブラリです。宣言的なパラダイムによって、あなたのアプリケーションがどう動作しているかをわかりやすくすると共に、効率が良くかつ変更を容易にすることを目標としています。
212
質問
0
票
1
回答
495
閲覧数
TypeScriptのmap()を使用した際のkeyエラー
概要
現在、TypeScript + React + Material-UIを用いた開発を行っています。
その中でオブジェクトをmap()で回して表示しているのですが、下記の様なエラーが発生いたしました。
差分表示の際にユニークなkeyを使用した方がパフォーマンスがよくなるということは理解しているのですが、何か勘違いをしているのか、中々エラーが消えてくれません。
...
0
票
1
回答
1,320
閲覧数
TypeScript+React構成におけるMaterial-UIの型エラー
概要
現在、React + TypeScript + Material-UIを用いた開発を行っていますが、エラーが発生致しました。Material-UIのCSS in JSを用いているのですが、その中のtoolbarで下記の様なエラーが発生致しました。TSの型エラーだということは分かるのですが、解決方法は分からず…。
自分なりに色々調べてみましたが、問題に該当する記事が見つけられませんでした…。
...
0
票
1
回答
1,377
閲覧数
Material-UIのmakeStyles関数でコンパイルエラーが発生する
概要
現在、React+TypeScriptを利用して開発を行っていますが、エラーが発生致しました。
Material-UIのCSS in JSでmakeStyles()を用いているのですが、その引数のthemeで下記の様なエラーが発生いたしました。
開発はDocker上で行っているのですが、元々は下記の様なエラーは発生していませんでした。しかし、docker-compose up -...
1
票
1
回答
529
閲覧数
Gatsby, Stripe: 決済ボタン実装をしようとしたら 'Uncaught TypeError: Cannot read property 'configure' of undefined'と出る
Gatsby公式ドキュメントにて、ECサイト構築チュートリアルに沿って開発をしています。
ただ、checkout.jsをチュートリアルの通りに書くと、以下のエラーが出て、画面全体が真っ白になります。
Uncaught TypeError: Cannot read property 'configure' of undefined
The above error occurred in the &...
0
票
1
回答
363
閲覧数
ReduxのReducerの3次元配列の更新が上手くいきません
概要
現在、TypeScript+React+Redux+Go+gRPCを用いた個人開発を行っています。
そこで、gRPCで受け取った3次元配列のレスポンスをReducerに記述したいのですが、そこで今悩んでいます。
具体的には3次元配列の値をinitialStateにコピーする方法がわかりません。通常の一次元ならば記述できますので、配列を崩してReducerを複数作ることも考えたのですが、...
2
票
1
回答
4,487
閲覧数
Reactでinput type="text"のvalueをボタンを押すことでリセットしたい。
Reactでテキストフォームをリセットする方法をご教示いただけないでしょうか。
下記は動作デモです。
demo
テキストフォームに「ok」を入力し「check」ボタンを押すことで"ok"というアラートが表示されます。
テキストフォームに「ok」以外を入力し「check」ボタンを押した場合は、"no"というアラートが表示されます。
デモにおいて、「clear」ボタンを押すことで、...
0
票
1
回答
354
閲覧数
gRPC+Go+React+TypeScript における Connect error
概要
現在、勉強の為にgRPC+Go+React+TypeScriptを用いた個人開発を行っています。
ReactとGoの間にはEnvoy Proxyを置いています。
gRPCは初めてということもあり、新規会員登録機能においてgRPCの接続テストを行っています。
具体的には、新規会員登録機能にアクセスするとgRPCでリクエストを送り、それに対するレスポンスをReact側でconsole....
1
票
1
回答
315
閲覧数
React + Reduxにおけるdispatch時のエラー
React + Reduxにおけるdispatch時のエラー
概要
現在、TypeScript + React + Reduxを用いた開発を行っています。
仮のログアウト機能を実装中にエラーが発生しました。
具体的には、actionをdispatchした際にエラーが発生します。
どうやら下記のjwtLogout内のdispatchで発生している様です。
自分なりに色々調べてみましたが, ...
0
票
1
回答
331
閲覧数
React + TypeScriptでのコンポーネントのエラー
React + TypeScriptでのコンポーネントのエラー
概要
現在、TypeScript + Reactで開発中ですが、下記の様なエラーが発生いたしました。
エラーの意味と該当箇所は恐らく分かっています。
具体的には、<Icon />でundefinedをコンポーネントとして描画しようとしている為なのかなと…。
しかし、それを解決する方法が分かりません。
...
1
票
1
回答
180
閲覧数
Reactのstateに格納するデータは表示に関係するものだけを格納するべきなのでしょうか?
現在Reactを使っているのですが、stateに格納するデータは表示に関係するものだけ入れるべきなのでしょうか?
なぜこのような質問をするかというと、私が調べた限りsetStateで値を設定した場合、再描画が走るという認識です。
であれば設計方針としては、描画に直接的に関係ないデータはstateに格納するのではなく、インスタンス変数などに格納するべきなのでしょうか?
...
0
票
1
回答
50
閲覧数
React公式サイト「MAIN CONCEPTS」内、「Lists and Keys」の例「Keys Must Only Be Unique Among Siblings」で「posts」ではなく「post」となっているのはなぜでしょうか。
表題の件、CodePenに該当コードが公開されています。
https://codepen.io/gaearon/pen/NRZYGN?editors=0010
React公式サイトの該当ページは下記になります。
https://reactjs.org/docs/lists-and-keys.html
function Blog(props) {
const sidebar = (
&...
0
票
1
回答
193
閲覧数
OnsenUI + React + cordova の使用について
現在、Monaca CLIを使用してOnsenUI + React + reduxで開発を進めています。
そこで質問なのですが、React上でCordovaプラグインを使用するにはどうすればよいでしょうか?
ひとまず端末情報を表示しようと思い、npmにて「cordova-plugin-device」を取得し、
http://docs.monaca.io/ja/reference/cordova_6....
1
票
1
回答
124
閲覧数
react.jsで作ったコンポーネントの動作がスマホのchromeだけ違う
reactの練習で、create-react-appで作成したアプリのapp.jsを書き換えたり、簡単なコンポーネントを作って読み込んで動かしたりしています。
NumberOfGamesコンポーネントが入力欄、PrintBasicInfoコンポーネントが入力内容表示部分、
入力欄に入力(あるいは削除)する度にstate.placeが書き換えられて表示部分も変化する。
App....
1
票
1
回答
200
閲覧数
React Hooksの繰り返し内での使用
React Hooksはifやforの内部では使用できないという制約があります。
そうすると、検索結果を一覧表示するようなテーブルの行の中ではReact Hooksを一切使用できないということになるのでしょうか。
テーブルの各行がコンポーネントになっている場合、各行に表示するデータおよびそれを更新するための関数を与えるためにはprops経由で渡す必要があるのでしょうか。
0
票
1
回答
1,545
閲覧数
ReactをimportしようとするとSyntaxError
Reactをimportしようとして、node {ファイル名} を実行した際にエラーが発生してしまいます。
ネットで調べた結果、transpileをしなくてはいけないのはわかったのですが、transpileの仕組みと仕方がわかりません。どなたか教えていただけないでしょうか? MacのTerminalを使っています。お願いします。
Javascriptのファイル:
import React ...
0
票
1
回答
216
閲覧数
jQueryMobileとReact.jsは組み合わせられませんか?
いろいろやっても動きませんでしたので、
質問させてください。
JavaScriptには慣れていませんので、
常識的な変なこと聞いていたら申し訳ないです。
こちらのサイトのReact.jsのサンプルを動かしました。
Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを書き比べた! - paiza開発日誌
http://paiza.hatenablog....
1
票
2
回答
2,455
閲覧数
react functional component 再レンダーされない
react のhooksを使ってsetStateを呼びだしたときに、再レンダリングが走りません。
なぜでしょうか?
todoアプリのdeleteを押したときに、stateの値は更新されているようですが、再描画が走りません。
stateには配列を入れて、更新をしているはずなのですが。。
以下、コードです。
// app.txs
const App = () =>{
const [todo, ...
-1
票
1
回答
3,256
閲覧数
Reactのrender()内で値の文字列結合をするときの書き方が不明です
render() {
let tags = this.props.tags;
if (!Array.isArray(this.props.tags)) {
tags = [tags];
}
let tagsDisplayName = "name";
if(tags.length > 0){
const category =...
0
票
1
回答
5,668
閲覧数
何故「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
回答
6,873
閲覧数
webpackのビルドをしても,ローカルの開発環境でエラーが出てしまいブラウザに何も表示されません
質問の主旨
現在、Reactを勉強中で本を読み進めてチャットアプリを作成しています。ですが、webpackのコンパイルでよく理解できないエラーが出てしまいうまくいきません。
ブラウザは立ち上がるのですが、画面が白いまま、エラーが出ます。
初心者なので、webpack周りのエラーのことを調べてみても結局よくわからないままです。
開発環境は以下の通りです。
インストールしたライブラリ
Node....
0
票
1
回答
550
閲覧数
JSXで配列をループで回して2個ごとにdivで纏めたい
現在、特定の要素が集まった集合があり、それをループで回して2個の要素毎にdivで纏めたいです。
完成形のHTMLの例を挙げると以下の様な感じです。
<div class="row">
<div class="hoge"/>
<div class="hoge"/>
</div>
<div class="row">...
0
票
1
回答
105
閲覧数
ReactのRouteHandlerが反応しない
React-Routerを使おうとしているのですが、
RouteHandlerで呼び出されるはずのDOMが表示されません。
HTML:https://github.com/hideokamoto/wp-react/blob/master/index.html
JS:https://github.com/hideokamoto/wp-react/blob/master/src/app.js
...
2
票
1
回答
522
閲覧数
TypeScriptのgenericsを使ったReactコードのコンパイルが通らなくて困っています
再現コードは最小限にシンプルにしたので、意味自体はありません。
interface TextProps { data: { text: string }; }
interface ObjProps { data: object; }
const Para: React.FC<TextProps> = ({ data }) => <p>{data.text}</...
0
票
1
回答
2,335
閲覧数
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,167
閲覧数
なぜ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
回答
661
閲覧数
react,material-uiのselectにて、labelと要素が重なって表示される
以下のような形で、reactにてmaterial-uiを使用し、セレクトボックスを作成しています。
しかし、labelとセレクトボックス内の要素が重なって表示されてしまいます。
どのような観点で修正を実施すればよいかご教示いただければ幸いです。
componentWillMount() {
navigator.mediaDevices.enumerateDevices()....
1
票
1
回答
165
閲覧数
発行されたActionをどうやって対応するReducerに渡しているのか
はじめて、質問を投稿させていただきます。
4月から新卒としてWeb系企業に勤めています。
幸運なことに新規案件に携わることができ、とても楽しくエンジニア生活をスタートさせることができました。
今現在はReactとReduxを使って開発を行っていますが、そこでどうしても理解できないことがありましたので、それをご質問させていただきたいです。
複数のActionと複数のReducerが存在する場合、...
0
票
1
回答
88
閲覧数
React.js renderのないクラス定義
下のURLでどうやってローソク足が描画されているのか調べています。
CandlestickSeriesコンポーネントがそれを担っていると思いますが、CandlestickSeries内でrenderされたGenericChartComponentにrenderが定義されていません。では、GenericChartComponentの返り値は何になるのでしょうか?
https://...
1
票
0
回答
82
閲覧数
オプティマイズリー (Optimizely A/B テスト)でのReact.jsの記述
ターゲットにしたいページが、React.jsで動いている為 JQueryやVanila JS での記述ではなく全てReact での記載でエレメントを書き換えたいと考えております。今まで、cssとjQueryでの記載しかしたことがなく、React.jsで全て動いているページをターゲットにしてオプティマイズリー上で上書きしたくてもできません。HTMLの削除、css追加なども全く効かない状態です。
...
2
票
2
回答
2,144
閲覧数
ReactもしくはNode.jsで、既存のPDFをフォーマットに使用し、PDF出力を行いたい
実現したいこと
現在 フロントエンドをReactでサーバレス環境(Firestore + Cloud Functions)にてWEBの開発を行なっています。
開発の仕様で、既存のPDFをフォーマットに使用して(値をあてはめて)PDFを出力したいのですが、ライブラリ等を調査したところクライアントサイド(React)だけでは既存のPDFをフォーマットに使用しての出力する糸口が見つかっておりません。
...
0
票
0
回答
342
閲覧数
Reactのmaterial-ui-pickersのTimePickerの時間表記を変更したい
お世話になります。
ReactでTimePickerを使用していて時間の表記を00:00~23:59ではなく、05:00~28:59に変更したいのですが実装例をご教示きいただけませんでしょうか。
※イメージ
現状:
期待値
よろしくお願い致します。
1
票
0
回答
251
閲覧数
Firebase Hostingでリダイレクト処理ができない
Firebase Hostingを用い、React(ルーティングにはreact-router-domを使用)にてWEBアプリを公開しようとしています。basic認証を行いたいのですが、index.htmlを起点としたSPAなので、cloud functionsを通してルーティング処理をしようとしていますが、うまくいきません。
実装の内容としては以下リンクにあるような「basic-auth-...
8
票
1
回答
3,828
閲覧数
仮想DOMを使うと早くなる理由がいまいちわかりません
実DOMを操作するよりも仮想DOMを使ったほうが速いという話をききますが、
実際に早くなる理由がいまいちよくわかりません。
変更前と変更後を比較して差分を変更するから、という説明を聞くと納得しそうになりますが、
DOM全体でなく、DOMの一部を再レンダリングするブラウザの機能ををうまいこと使うという意味なのでしょうか。
そういった場合にどういったjavascriptの関数が実行されるのかなど、...
6
票
1
回答
161
閲覧数
static x = ( { y } ) => { ... }の仕組みについて
https://www.youtube.com/watch?v=JbaZs1dzsVo
上記react native参考動画の
static navigationOptions = ({navigation}) => {...}
の部分なのですが、navigationを引数に受け取れる仕組みが理解出来ません。
そもそも変数を{}で囲むとどういった動きをするのでしょうか。
...
2
票
1
回答
60
閲覧数
webpackのパッケージ依存について
こんにちは、初めまして。
今Reactで開発を始めようと環境を作っているところですが、
npmでwebpackをインストールするところでバージョン依存ではまっています。
最新の webpac@k4.8.3 を使いたいのですが、
インストールしようとすると以下が出ます。
webpack4.8.3 => UNMET PEER DEPENDENCY ajv@6.5.0
上記が出たので、
ajv@6....
1
票
1
回答
95
閲覧数
ReactのRenderに利用したい関数が文字列になっている場合の呼出し方
React のRender処理で困っていることがあります。
func1という関数があり、renderする際に呼び出します(例: return (`<func1/>`))。
例えば、下記のようなJSONの値にあるfuncNameにある文字列から 実際の関数名としてrenderしたいのですが、どうすればよろしいでしょうか?
{funcName:"func1"}
上記の値だった場合、
...
3
票
1
回答
1,409
閲覧数
React.DOM が undefined でエラーになる
基礎的なことを学びたいので、まずはJSX無しで動かしたいと思い、React.DOM.div を使用すると以下のエラーが出ます。
build.js:20123 Uncaught TypeError: Cannot read property 'div' of undefined
コード
const React = require('react');
// 略
const HelloWorld ...
0
票
1
回答
58
閲覧数
componentWillUpdate()時に子のcomponentにpropsでstateを渡したい
あるcomponentでcomponentWillUpdate()をし、
state、またはpropsが更新されたタイミングで子のcomponentにpropsで親のcomponentのstateを渡したいのですがどうすればできますか?
0
票
1
回答
439
閲覧数
react nativeでコンポーネントのアップデートの仕方について教えてください。
初めまして。
お世話になります。
React Nativeのことで質問です。
React-Native-cliを利用してプロジェクトを作成したのですが、package.json内のreactのバージョンが^16.3.0-alpha.1となってしまっている影響か、次のようなWarningが出るようになりました。
Warning: componentWillReceiveProps is ...
0
票
1
回答
7,280
閲覧数
setState後、render()が更新されない
react-nativeを用いてコンポーネント間の値のやりとりをしたいと思いっています。
子コンポーネントのイベントから親コンポーネントのchangecountを実行して、親コンポーネントの{selectedTab:0}を更新。sub2をタップした回数をAppでインクリメントしてSub1に表示することを期待していますが、render()は一度しか呼ばれてないようです。setState()...
0
票
0
回答
164
閲覧数
React.jsにてToDoリストを制作しています。
実現したいこと
お世話になっております、この度初めてReact.jsを導入しました。
現在ToDoリストを制作しているのですが、タスクを登録した際に登録した日時もリストに反映される仕組みを構築したいと考えているのですが、完全に手詰まりになってしまいました。
是非皆様のお知恵をご教授いただけたら幸いです。
...
0
票
1
回答
360
閲覧数
Reduxの言葉、日本語で何という?
Reactの開発をし、Reduxも使っています。ドキュメンテーションを書いている中でReduxについて書いているのですが、下記の言葉を日本語で何というのか分かりません。
React
Redux
Actions
Action Creator
Reducer
ただ「アクション」とかのようなカタカナの言葉になるのでしょうか。
よろしくお願いします。
2
票
1
回答
766
閲覧数
Vue や React では JSX のような JavaScript の構文拡張の使用が必須ですか?
生のJSのDOM操作がしんどいです。
下記のように非常に大変な作業なのですが、これを解決するには文法の癖の激しいreactやvueなどのフレームワークを使うしかないのでしょうか?
http://qiita.com/kouh/items/dfc14d25ccb4e50afe89
基本的には関数、文法を生のJSで書き、reactなどをDOM操作の部分だけ使うという方法か、...
0
票
1
回答
114
閲覧数
React の cloneElementをreturn したい
Reactで下記のようなコンポーネントを作りました
data は API を受け取るためのものです
const Loop = ({data,children}) => {
return (
<ul>{
data.map((item,index)=> {
return (
React.cloneElement(
...
0
票
1
回答
2,008
閲覧数
ReactのcomponentWillUnmountでbeforeunload的なことがしたい
Reactでbeforeunloadを使いたいのですが、windowのスコープの範囲に収まらないbeforeunloadイベントを拾えないため、componentWillUnmountが呼ばれたタイミングでconfirm関数を呼び、キャンセルされればcomponentWillUnmountをpreventしたいです。
やりたいことは以下のような感じです。
...
0
票
1
回答
403
閲覧数
Reactで可変長のinputを扱いたい
inputのvaluesを配列で保持するときに、どのinputの値が変化したのかをindexのようなものから取得して配列を更新するようにしなければならないと考えますが、そのようなことは可能でしょうか。コンポーネントのrender()は以下のとおりです。
render(){
var posList = this.state.query.pos.map((p) => {
...
0
票
1
回答
398
閲覧数
react-routerでエンターキーをおした時ページ遷移したい
react-routerを使っています。そこで質問ですが、下記のDOMでTextFieldにフォーカスした状態でエンターキーを押した時に、Linkをクリックした時と同じアクションつまり(ページ遷移)を起こしたいのですがAPIなどは提供されているのでしょうか。
<div>
<TextField
floatingLabelText="huga"
...
0
票
2
回答
1,100
閲覧数
material-uiでAppBarの右側にアイコンがでない
Reactjsのmaterial-uiでAppBarの右側にアイコンを置きました。しかし、現れるはずのアイコンが出てきません。
どのようにすれば表示されるのでようか。
import React, { Component } from 'react';
import { Link } from 'react-router';
import getMuiTheme from 'material-ui/...
0
票
1
回答
214
閲覧数
Error: Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.(…)
Reactjsで画像のBase64表現をサーバから取得し表示するコンポーネントを作成しています。コードは以下のとおりです。
DataImage.react.js
import React, { Component } from 'react';
import DataImageStore from '../../stores/DataImageStore';
import ...
0
票
2
回答
1,073
閲覧数
Uncaught TypeError: Cannot read property 'open' of undefined
React.jsでmaterial-uiを使い下記コードを作成しましたが、leftButtonTouchedでタイトルのようなエラーが出てしまいます。どこが間違っているのでしょうか。
import React, { Component } from 'react';
import { LeftNav, MenuItem, AppBar } from 'material-ui';
export ...