[reactjs] タグが付いた質問
Reactはユーザーインタフェースを組み立てるためのJavaScriptライブラリです。宣言的なパラダイムによって、あなたのアプリケーションがどう動作しているかをわかりやすくすると共に、効率が良くかつ変更を容易にすることを目標としています。
211
質問
0
票
1
回答
526
閲覧数
react-routerを導入するとcomponentDidMountが呼ばれなくなった
Reduxのサンプルコードである。asyncにreact-routerを導入しました。しかし、index.jsとroutes.jsを下記のように作成したところ、containers/App.jsのcomponentDidMountが呼ばれずにViewが表示されなくなってしまいました。どこが間違っているのかわかりますか。
index.js
import 'babel-polyfill';
...
0
票
1
回答
141
閲覧数
Next.js, Reactで表示文字を変更したい
表示データをtitleという変数に持たせて、ボタンがクリックされたらchangeTitleでタイトルを変更させているのですが、変数の中身が変更しても、表示上で変わりません。
なにをすれば表示も変わるのでしょうか?
import type { NextPage } from 'next'
const Account: NextPage = () => {
let title = &...
0
票
0
回答
87
閲覧数
React.JSでAppを作っているのですが、App内で使う画像が表示されない
現在、React.JS でAppを作っているのですが、その中に画像を入れたいのですが画像をインポートするとURLが表示され内容が表示されません。
画像はimport blueCandy from "./Images/Candy_Blue.png"という形でApp.jsにインポートをしているのですが上手くいっていない様子です。
どなたかお力添えしていただけませんでしょうか。
...
0
票
0
回答
56
閲覧数
jwtをtureにした状態でNextAuthのsessionに任意のプロパティを追加したい
概要
NextAuthのsessionに任意のプロパティを追加したいです。
Credentialsを使用するため、jwtをtrueに設定しています。
しかしjwtをtrueに設定しているため、callbacksでsessionを操作することが出来ません。
コード
[...nexauth].ts
const options = {
providers: [
//省略
],
...
0
票
0
回答
29
閲覧数
setStateと再レンダリングの挙動について
以下のようなソースでsetCount(count+1)のようにしてレンダリング回数を見ていました。
countが増加しないのはわかるのですが、以下の画像のように、'rendered timer'の回数が1回多いように思います。
import { useEffect, useState } from 'react';
export const Timer = () => {
const ...
0
票
1
回答
472
閲覧数
React 子コンポーネントから親コンポーネントのuseState書き換え時の警告
Reactで子コンポーネントから親コンポーネントのuseState書き換え時の警告の修正方法がわかる方
ご教示いただけますと幸いです。
実行画面がエラーになりませんが、コンソールを開くと警告が出ていますこれを修正したいです。
コンソールの警告文
Warning: Cannot update a component (`App`) while rendering a different ...
0
票
0
回答
48
閲覧数
firestoreへのGetStaticPropsでデータの取得ができない
Next.jsとFirebaseを用いて、Todoアプリを制作中です。
現在見た目の部分はある程度完成しているのですが、GetStaticPropsを用いたデータの取得がうまくいきません。
自分のコードをチェックして、何が問題なのかご指摘をいただけないでしょうか??
import { NextPage } from "next"
import { db } from "...
0
票
0
回答
52
閲覧数
Reactを下層ページに配置するには?
React初心者です。優しく教えていただけると嬉しいです。
yarnを使ってReactをインストール、問い合わせ機能を実装でき、これがindex.htmlに反映されています。
ですが実際に問い合わせがあるのは「コンタクトページ」等の下層ページ(https:// ~~~/◯◯/)で、トップページであることは少ないはずです。
この場合、この機能を下層ページに実装する方法を教えていただきたいです。
...
0
票
1
回答
165
閲覧数
作りながら学ぶreact入門 〜インストール手順 Mac編〜 でエラー
https://github.com/yuumi3/react_book/blob/master/docs/install_mac.md を参考に進めたところ、npm start でエラーが発生してしまいます。
> hello_react@1.0.0 start
> webpack serve
[webpack-cli] Invalid options object. Dev ...
0
票
1
回答
272
閲覧数
react-router-domのuseLocation()でprotocolとhostを取得する方法
react-router-domのuseLocation()でprotocolとhostを取得する方法はありますか?
useLocation()ではなく、window.location.protocol、window.location.hostとするしかないのでしょうか?
import { memo, VFC, useEffect } from "react";
import {...
0
票
1
回答
151
閲覧数
コンソールに表示されたワーニングを削除するにはどうすればよいでしょうか?
React 17, React Hook Form v7, yup, Semantic-uiという環境にてReact学習中です。
共通コンポーネントを作成した際、以下のワーニングがコンソールに出力されました。
index.js:1 Warning: Function components cannot be given refs. Attempts to access this ref will ...
0
票
1
回答
143
閲覧数
React TypeScriptにおいて、複数のコンポーネントをまとめる方法は?
使用する際に、ComponentAll.Component1のように強制するにはどのような宣言方法を行えばよいのでしょうか?
component1.tsx
const Component1 = () => (
<input type="email">
)
export default Component1;
component2.tsx
const ...
0
票
1
回答
169
閲覧数
reactで西暦を和暦で表示する方法
<InputDateAsNumber isYM value={dayjs().format("YYYYMMDD")} />
で表示すると
2021/09
と表示されます。
R3/09
のように表示するにはどのようにすればいいでしょうか。
0
票
0
回答
68
閲覧数
Mateiral uiをVite環境で利用した場合にコンソールのエラーがchunk fileで表示される
コンポーネントの warningや errorなどはsourmapがうまく動いているため、minify前のソースコードの箇所をコンソールに表示してくれます。
しかしMateiral-uiが絡む場合はchunkfileで表示されるため、デバッグがしづらい状況です。
こちらMaterial-uiの場合もminify前のソースコードの箇所を指定してらうようにしたいです。
...
0
票
0
回答
85
閲覧数
一部の文字列をマスク表示したい
10桁の数字を 123456**** のように一部だけマスク表示させたいです。
inputType="password" のようにpasswordではすべてがマスク表示になります。
あとでマスク表示できる桁数を自由に変えることもできるようにするにはどのようにすればいいでしょうか
0
票
0
回答
55
閲覧数
条件付きチェックボタン
自社をチェックボタンで使用した時のみ、預かり倉庫をチェックできるようにしたいです。
それ以外の時は預かり倉庫は非活性でチェックできないようにするにはどのようにすればいいでしょうか?
<Row>
<Label className="w-12/60">自社</Label>
<...
0
票
1
回答
68
閲覧数
いずれか必須の部分を(※)で表現したい
requiredで表現すると必須となるので、期限1、2、3のいずれか必須項目を期限1、2、3のあとに(※)を表示するにはどのようにすればいいでしょうか。
<Row>
<Label required className="w-5/60">
期限1
</Label>
&...
0
票
1
回答
69
閲覧数
'./App' does not contain a default exportが出てしまう
エラー内容
Unexpected token, expected "," (127:0)
こちらのエラーでコンパイルできずにいます。初歩的な質問かと思いますが、どうぞよろしくお願い致します。
import Amplify, { Storage } from 'aws-amplify';
import { AmplifyAuthenticator, AmplifySignUp, ...
0
票
1
回答
87
閲覧数
{list2.map((value) => <p>{value.Key}</p>)の部分が表示されない理由を知りたい
紆余曲折あり、コードが以下のようになりました。
AWSのS3とも接続でき、コンソールにオブジェクトの名前を表示するところまで出来ました。
最終的にはJSXでブラウザに表示させたいです。({list2}の部分)
なぜか何も出てこなく、途方に暮れております。
何が間違っているのか、ご教示ください。
宜しくお願い致します。
import Amplify, { Storage } from 'aws-...
0
票
1
回答
613
閲覧数
TypeError: Cannot read property 'map' of undefined
こちらのサイトを参考にReact.jsを用いてS3のリストを取得するスクリプトを作成しております。
https://note.kiriukun.com/entry/20190419-s3-examples-list-objects-in-node
npm startで先ほど動作を確認したところ、タイトルのエラーに引っかかってしまい、直せない状況です。
App.jsの内容は以下の通りです。
...
0
票
0
回答
61
閲覧数
FLIP手法を用いたページレイアウトの作成
こんにちは、プログラミング初学者です。ReactでFLIP手法を用いたページレイアウトを作っているのですが、手詰まりなのでご教授願いたいです。FLIP手法については参考URLを参照願います。
早速ですが、私が作りたいと思っているものは、下記の画像のように1つのメインコンテンツと複数のサブコンテンツで構成され、...
0
票
1
回答
143
閲覧数
S3のリストをReactで表示させたい
AWSのあるバケットに入っているオブジェクトの一覧をReactで表示させたいです。
Javascript S3等で調べてみましたが、わかりやすいものがなく、困っております。
S3への接続するのがまず第一段階でなんとかしたいです。
WebアプリケーションはAmplifyで作成していて、Amplifyのコンポーネントで使えるものがあれば良かったのですが、いまいちでした。
...
0
票
0
回答
53
閲覧数
plotly dash JSONエラー
作成したプログラムは、動くのですが、ブラウザでランダムにエラーが発生します。
開発者ツールで調べると、
になっており、error.jsのコードは
callbacks.tsは
このエラーは、無視してもいいものなのかが分かりません。
よろしくお願いします。
2
票
1
回答
348
閲覧数
Next.jsやGatsbyのSSGは何をしているのか?
Next.jsやGatsbyのSSGに関する私の認識が合っているかどうか、お伺いしたいです。
SSGすると静的サイトが出力できる、という話をあちらこちらで耳にします。
それで私は、SSGではReactを含まないピュアなHTMLが出力されるのだと思っていたのですが、最近これは間違っているのではないかと思うようになりました。
実際には
①ビルド時には通常のReactアプリケーションと、...
1
票
2
回答
224
閲覧数
オブジェクトが格納された配列の内、ボタンを押すことで任意のオブジェクトを配列の中で1つ前または1つ後ろに移動させたい
demo
↑
追加、削除、値の編集が可能な配列があります。
React.jsで実装しています。
Upボタンを押下で1つ前に、Downボタンを押下で1つ後ろに移動させたいです。
例えばリストが下記になっている場合、
・hoge
・fuga
fugaのUpボタン押下で下記の並び順に変更したいです。
・fuga
・hoge
コードは下記の通りです。
const rowdefaultItem = {
...
0
票
0
回答
62
閲覧数
reactの学習手順について
reactの修正をしているのですが、経験がないため、とあるタスクに手を付けられず困っています。
具体的には(getBoundingClientRect())と言う関数を用いて、
配置した座標の要素を取得してカレンダーに存在する予定をブロックとして表示する機能があります。
その各予定ブロックに特定の予定が存在した場合、予定ブロックの下にブロックを追加表示させる必要があります。
...
2
票
1
回答
500
閲覧数
react nativeのwebviewでlocalのhtmlを読み込む方法を教えてください
<WebView url='./web/webview.html' style={{flex: 1}} />
上記のような形で表示したいのですが。。。
1
票
1
回答
600
閲覧数
Objects are not valid as a React child (found: [object Promise]). のエラーを解決したい
react.jsとfirebaseを使ってSNSのようなアプリを作成していますが、以下のようなエラーが出て困っています。
useEffectを使ってfirebase内のユーザー投稿データを抽出しようとしているのですが、useStateのsetLists(Lists)をすると上のようなエラーが出てしまいます。
該当コードは下記になります。
import React, {useState, ...
0
票
1
回答
102
閲覧数
react-native-webで作成したWebページに、"http://---.js" 形式ファイルを埋め込みたい
やりたいこと
react-native-webで作成したWebページに、"http://---.js" 形式ファイル を埋め込みたい
やってること
react-native-web, expo, firebase hostingを用いてWebページを作成しました。
そこにブログページも作ろうと思ってます。
ブログ記事の作成にはGoogleドキュメント、...
0
票
0
回答
229
閲覧数
コンポーネント化しようとするとエラーが発生する
下記のサイトを参考にしながら、React×Typscriptでプロフィールサイトを作成しています。
Skills.tsx内の <Box display='flex' justifyContent='center' p={1} > 以下をコンポーネント化したく、Technic.tsxを作成し、色々調べて実装したのですが、エラー表示が出て、これ以上積んでわからない状態です。
...
0
票
2
回答
559
閲覧数
javascriptでwidgets.js(外部の.jsファイル)読み込み完了を検知するには?
gatsby.jsで製作中のサイトにTwitterのツイートを埋め込もうとしています。
htmlの<head>で
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
を読み込んでいてるのですが、...
1
票
1
回答
198
閲覧数
縦に積み上がる要素の削除したときに、下にガタっと落ちてしまうのを滑らかにアニメーションしたい
material-uiの下記リンクスナックバーのようなものを作成しようとしています。
https://material-ui.com/ja/components/snackbars/#complementary-projects
その際のアニメーションで、要素が削除されたときに縦に移動するアニメーションの実装方法がわからず困っています。
理想↓↓
現実↓↓ ...
0
票
0
回答
83
閲覧数
GooglePlacesAutocompleteとgoogle-map-reactを共存させる方法
前提・実現したいこと
現在React.jsを用いて投稿型webアプリを制作しています。
メインのコードは書き終えたのですが1箇所だけwarningが解決しないため、是非皆さんの知恵を貸していただきたいです。
エラーは以下の通りです。
発生している問題・エラーメッセージ
Aborted attempt to load Google Maps JS with @googlemaps/js-api-...
1
票
0
回答
333
閲覧数
javascriptで半角入力を強制したinput要素に全角入力を行った際に入力済みの文字が消える現象
Reactを用いて以下のようなコンポーネントを作成しました。
文字が入力された際、それが数字であるなら半角化して反映します。
全角入力をそのままにしてしまうと不具合が起きる("111あああ222"としたとき222の部分が反映されないなど)ため、入力を検知するたびフォーカスを一瞬外して戻すことで強制的に一文字ずつ確定させています。
const InptArea:FC=()=>...
0
票
1
回答
375
閲覧数
vscodeの拡張機能Remote-Containersを用いたDocker上の開発で、Reactがリアルタイムで反映されない
以下のようにDockerfile及びdocker-compose.ymlを設定しました。
Dockerfile:
FROM node:16
docker-compose:
version: "3"
services:
node:
build: .
ports:
- "3000:3000"
volumes:
...
0
票
1
回答
275
閲覧数
input要素を含んだ配列を削除する際、削除するinputのvalueも削除したい
ユーザー側で項目を増減できるテキストフォーム入りリストを作成しています。
下記はデモです。
Reactを使用しています。
CodeSandBox
リスト直下のAdd itemを押すことで、リスト追加できます。
リストの右端の×を押すことで、リストを削除できます。
現状リストの増減はできるようになったのですが、テキストフォームに値を入力した状態で入力したリストを削除すると、リストは削除できるものの、...
0
票
1
回答
188
閲覧数
Next.jsのブログkatexで書かれた数式を表示したい。
mdファイルを取り扱うのに remark を使用しているので remark-math というものをドキュメントに沿ってインストールしたんですが、今で import でモジュールを取り込んできたのに require で読み込んでいてNext.jsではこのようなモジュールの取り込み方は出来るのでしょうか? 一応ドキュメント通り require で試してみたのですが、エラーが出ます。
...
0
票
1
回答
89
閲覧数
APIからjsonを得た後にページをロードするとjsonが読めなくなる
reactを用いて、ダミーのユーザ情報をjsonで返すAPIからデータをロードするコードを書いております。以下のようなものです。
import React, { useState, useEffect } from "react";
function App() {
const [users, setUsers] = useState(null);
...
0
票
1
回答
110
閲覧数
react-draggableのドラッグ時動く関数内でデフォルトの引数を使いつつ、任意の渡したい変数も渡せる書き方がわからない。
やりたいこと
12種の画像をドラッグアンドドロップで動かせるようにすることです。その各画像の位置を状態として保存することで、コンポーネントが再描画されても動かした位置に画像があるようにしたいです。
各画像は色が違うのでcolorという変数で識別しています。
困っていること
画像のドラッグ時に動く関数に、デフォルトで渡ってくる引数を保持したまま渡したい変数(color)を渡せないことです(それにより、...
0
票
1
回答
843
閲覧数
TypeScript components内でmap()を使用するとエラーが出る。
<span>タグに topic を代入して出力するコンポーネントを作成したいのですが、 (property) topicList: string[] ',' expected.ts(1005) と出て .map が使えないみたいな表示がされます。なぜこのようになるのか分からないです。コードを見て頂けないでしょうか?
//topicListには["javascript"...
0
票
1
回答
336
閲覧数
子コンポーネントのuseEffectを発火させないようにするには?
React でウェブツールを作成しています。
親コンポーネントが別のものに変わったとき、子コンポーネントの useEffect が発火しないようにすることは可能でしょうか?
最小のサンプルを用意いたしました。
CodeSandbox: https://codesandbox.io/s/jovial-kowalevski-lkdbx
function ComponentA(props) {
...
0
票
1
回答
1,377
閲覧数
Next.js内のJSXでmapで二重ループしたい。
ブログを作成していて、記事の背景をループするごとに切り替えていきたくて下記のコード書いたのですが、上手く動作しないです。
map()を使用するのはJSXはレンダーするのに配列にして返す必要があるため、map()を二重にしてカラーを適用した要素を返す事で上手くいくと思っていましたが、画面に何も表示されないです。
教えて頂けないでしょうか、お願いします。
import Head from 'next/...
0
票
1
回答
481
閲覧数
react-draggableのnpmインストール時にエラーが発生してインストールできない。
困っていること
react-draggableというパッケージを既存のReactのプロジェクトにnpmインストールしようとするとエラーが発生してインストールできず困っております。
教えていただきたいこと
react-draggable(の安定動作版)をインストールする方法。
なぜインストールできないのか。
やったこと
実行コマンド
下記のコマンドを実行しました。
npm install ...
0
票
0
回答
97
閲覧数
reactにおけるクラスコンポーネントと関数コンポーネント間でのthisキーワードの変換
クラスコンポーネントから関数コンポーネントへ変換する際に、クラスコンポーネントそのものを指す"this"キーワードをどのように関数コンポーネントで記述すればよいか分からず困っております。
下記のようなnotificetion.jsがあったとし、
let instance = null;
class Notification {
constructor() {
if ...
0
票
1
回答
89
閲覧数
reactjsでstateの変更ができない
react中で1つの関数内で
const [items, setItems] = useState([]);
のようにし、itemを[]で初期化し、
useEffect(() => {
http.getItems().then((data) => {
setItems(data);
});
}, []);
で、jsonを取得しております。その後同じ関数内において
...
0
票
1
回答
128
閲覧数
reactのfunction App()内でのconstructorに関するエラー
reactのfunction App()内でconstructor(props)を記述したところ
Syntax error: Missing semicolon
とエラーが出ました。
コードは下記のとおりです。
import logo from "./logo.svg";
import "./App.css";
import Service from &...
0
票
1
回答
626
閲覧数
Next.jsで<Layout home>のhomeがどこから来る変数か分からない。
Next.jsチュートリアルで下記のコードが分からず困っています。
export default function Layout({ children, home }) { ここで childrenとhomeという引数が指定されていています。 index.js で呼び出す際に <Layout home> と 引数に home を取っていると思われるのですが、 この home が ...
1
票
0
回答
66
閲覧数
webRTCアプリがHeroku上で動作しない(simple-peer、socket.io)
ローカルでは動作するwebRTCアプリがHeroku上では動作せず困ってます。
My Heroku App: https://rgvc-client.herokuapp.com/
Github client: https://github.com/sayagit/RGVC-client
Github server: https://github.com/sayagit/RGVC-server
...
0
票
1
回答
2,523
閲覧数
IE11でarrow関数の変換ができない @babel/plugin-transform-arrow-functions が機能しない
ReactでIE11向けサイトを作成しているのですが、
Chromeでは使用できるarrow関数がIE11では構文エラーとなってしまいます。
@babel/plugin-transform-arrow-functions はarrow関数をfunctionに変換してくれるプラグインだという認識ですが正しいでしょうか。
buildした際にarrow関数が残ってしまいます。
設定は下記になります。
...
0
票
1
回答
190
閲覧数
特定のルートのみReact(JavaScript)からLumen(PHP)へAjaxをした際にCORSで弾かれる。
概要
現在下記の様な構成のアプリケーションを開発しています。
フロントエンドにReact.js、バックエンドにAPIサーバーのLumen、その間にリバースプロキシとしてNginxを置いています。
そこで、ReactからPromiseベースのAjaxライブラリであるaxiosを使ったところCORSで弾かれました。
Lumen側でCORSの設定をし、一応は回避することはできたのですが、...