[react-jsx] タグが付いた質問
27
質問
0
票
1
回答
46
閲覧数
ReactでWarning: The tag <image> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.が未解決
以下のワーニングが解決できずに困っています。
解決のためのアドバイスを頂けましたら幸いです。
react-dom.development.js:86 Warning: The tag <image> is unrecognized in this browser. If you meant to render a React component, start its name with ...
0
票
1
回答
29
閲覧数
Too many re renders React limits the number of renders to prevent an infinite loopエラー時にアロー関数を使うと指定関数が呼ばれない
お世話になります。
ReactでToo many re renders React limits the number of renders to prevent an infinite loopというエラーが出て困っています。
ネットで調べたら、アロー関数を使うと無限ループを阻止できるとあったので使ってみましたが、今度はアロー関数を使って呼ぶ関数が全く呼ばれなくなりました。...
0
票
1
回答
56
閲覧数
WordPressブロック開発にて<SelectControl>コンポーネントを複数選択にしたい
前提
teratailでも同様の質問をさせていただきました。
WordPressのブロック開発を行っています。
MAMPでローカル環境を構築しプラグインとしてカスタムブロックを追加して開発を行っています。
実行環境:
WordPress 5.9.2
npm 8.1.2
node.js 16.13.1
実現したいこと
投稿の情報を取得してコンポーネントで複数選択可能なブロックを作成する。
...
0
票
0
回答
59
閲覧数
ReactNative で登録済みのユーザーか否かで画面の表示を区別したい
現在、APIの結果によって表示するコンポーネントを切り替える処理を実装しています。
useEffectを使って画面をロードするタイミングで、
APIを呼び出しJsonオブジェクトとして結果を受け取っていますが、
該当データがない場合はオブジェクトが空で返ってきます。
その結果に応じて、return内で三項演算子を使って表示を切り替えたいと思っておりますが、該当データがある場合も『無い』...
0
票
0
回答
46
閲覧数
react-scripts v5 が正しく機能しない
以前はCRA4を使用していましたが、CRA5にupdateしました。その時に問題となったのは、react-scripts4から5に変更したときです。5にして、react-scripts startをするとサイトは表示されますが、cssがぐちゃぐちゃになります。
antdを使用しているので、antdやcss周りのreact-scriptsのwebpackのcss-...
1
票
0
回答
51
閲覧数
prettierにて、printWidthを300くらいにしているにも関わらず改行される
react、typescript, jsxといった技術スタックです。
prettierにて、printWidthを300くらいにしているにも関わらず、
jsxが以下のようになってしまいます。
<text>foo<text/>
↓
<text>
foo
<text/>
typescript自体のコードはしっかり300になるのですが、
...
0
票
1
回答
151
閲覧数
作りながら学ぶ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
回答
824
閲覧数
reactで複数のチェックボックス(全選択・全解除)実装したい
現在、next.jsで実装を進めているのですが、上記にある通り、複数のチェックボックスのチェック状態をstateで管理、また違うコンポーネントにあるボタンを押すとチェック状態が全選択もう一度押すと全解除というような実装をしたいのですが、どのようにすれば良いのか見当がつきません。
また、複数のチェックボックスというものはapiのデータから作られており、子コンポーネントでmapで回している状態です。
...
0
票
0
回答
60
閲覧数
reactの学習手順について
reactの修正をしているのですが、経験がないため、とあるタスクに手を付けられず困っています。
具体的には(getBoundingClientRect())と言う関数を用いて、
配置した座標の要素を取得してカレンダーに存在する予定をブロックとして表示する機能があります。
その各予定ブロックに特定の予定が存在した場合、予定ブロックの下にブロックを追加表示させる必要があります。
...
0
票
0
回答
120
閲覧数
三項演算子処理を 2択以上の条件分岐に対応させたい
私は現在、商品ページに販売するエリア名のラベルを追加する機能の拡張するための改修を行っています。
もともと、三項演算子で作っていた以下のようなコードで条件分岐させていました。
{production.area === Area.tokyo ? "東京":"大阪"}
今までは「東京」「大阪」の二か所での販売する用途だけだったのですが、
ここから「韓国」「...
0
票
1
回答
758
閲覧数
TypeScript components内でmap()を使用するとエラーが出る。
<span>タグに topic を代入して出力するコンポーネントを作成したいのですが、 (property) topicList: string[] ',' expected.ts(1005) と出て .map が使えないみたいな表示がされます。なぜこのようになるのか分からないです。コードを見て頂けないでしょうか?
//topicListには["javascript"...
0
票
1
回答
1,177
閲覧数
Next.js内のJSXでmapで二重ループしたい。
ブログを作成していて、記事の背景をループするごとに切り替えていきたくて下記のコード書いたのですが、上手く動作しないです。
map()を使用するのはJSXはレンダーするのに配列にして返す必要があるため、map()を二重にしてカラーを適用した要素を返す事で上手くいくと思っていましたが、画面に何も表示されないです。
教えて頂けないでしょうか、お願いします。
import Head from 'next/...
0
票
1
回答
580
閲覧数
Next.jsで<Layout home>のhomeがどこから来る変数か分からない。
Next.jsチュートリアルで下記のコードが分からず困っています。
export default function Layout({ children, home }) { ここで childrenとhomeという引数が指定されていています。 index.js で呼び出す際に <Layout home> と 引数に home を取っていると思われるのですが、 この home が ...
0
票
1
回答
1,568
閲覧数
Reactでyarn startしたらTypeError: Cannot read property 'map' of undefinedが発生した
Reactでコードを書いた際に yarn start を十個すると、以下のエラーが発生しました。
どこが間違っているのでしょうか。
エラーメッセージ:
TypeError: Cannot read property 'map' of undefined
コード:
import React, { useState, useEffect } from "react";
...
0
票
1
回答
311
閲覧数
子コンポーネントのuseEffectを発火させないようにするには?
React でウェブツールを作成しています。
親コンポーネントが別のものに変わったとき、子コンポーネントの useEffect が発火しないようにすることは可能でしょうか?
最小のサンプルを用意いたしました。
CodeSandbox: https://codesandbox.io/s/jovial-kowalevski-lkdbx
function ComponentA(props) {
...
0
票
2
回答
546
閲覧数
React + Typescript + MaterialUI 表にレコードを追加したい
reactもmaterialuiも初心者です
質問用に余計なコードを除ければよいのですがすみません
APIから取得したレコードを表に追加表示したいと思い以下のコードを作成しました
import React, { useState } from 'react';
import GenericTemplate from '../lib/GenericTemplate';
import { ...
1
票
2
回答
239
閲覧数
ReactでAxiosを使用し結果を表示する仕組みで、mapのエラー(TS105)となる
Reactを始めたばかりで質問がおかしければ申し訳ございません
単純にAxiosで取得した結果を画面に列挙するだけのを勉強しています
以下のコードです
import React, { useState } from 'react'
import axios from 'axios';
const searchGoogleBooks = async (searchString: string) =&...
5
票
1
回答
1,050
閲覧数
text/babel とはなんですか?
Reactのドキュメントを読み始めました。
Getting Started – React に
自前のテキストエディタを使いたい場合は、この HTML ファイルをダウンロード・編集して、ブラウザを使ってからローカルファイルシステムから開くことができます。ランタイムでの遅いコード変換が行われる為、簡単なデモに留めておくことをおすすめします。
とあるので、「このHTMLファイル」...
0
票
1
回答
689
閲覧数
React Typescript 関数の引数の書き方
前提・実現したいこと
親コンポーネントで子コンポーネントに渡す関数を定義したいのですが、引数をどう書いたらいいのかがわかりません。
わかる人がいたら教えて欲しいです
該当のソースコード
**types.ts**
export type Task {
id: number
text: string
done: boolean
}
//親コンポーネント
import React, {...
0
票
1
回答
237
閲覧数
jsxファイルをjsファイルで記述するにはどんなパッケージが必要なのでしょうか?
create-react-appにでプロジェクトを開始すると、最初から拡張子が.jsファイル内にjsx記法を使うことができますが、一体どのパッケージがその処理を担っているのでしょうか
react-scriptsがよしなにやってくれているとは思うのですが、
react-scriptsは裏側でいろんなパッケージをinstallしていたり設定ファイルを書いていたりするイメージがあり、...
0
票
1
回答
383
閲覧数
React.jsでコメントアウトができずアロー関数を使った表示ができない
React.jsでアロー関数を使って表記リストを表示しようとしています。
参考書『React.js & Next.js超入門』に掲載されていたプログラムで
Webでサンプルコードのダウンロードができるようなのですが、zipファイルの解凍でエラーが出て見れない状態です。
問題
①React.js部分は、Javaスクリプトなので、以下の記事を参考にすると{// }...
0
票
1
回答
518
閲覧数
JSXで配列をループで回して2個ごとにdivで纏めたい
現在、特定の要素が集まった集合があり、それをループで回して2個の要素毎にdivで纏めたいです。
完成形のHTMLの例を挙げると以下の様な感じです。
<div class="row">
<div class="hoge"/>
<div class="hoge"/>
</div>
<div class="row">...
1
票
1
回答
49
閲覧数
JSXで { を表示させたい
ReactJS中のJSXの中の { を表示させたいのですが、どのようにすればよいですか?
1
票
1
回答
524
閲覧数
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 &...
2
票
1
回答
764
閲覧数
Vue や React では JSX のような JavaScript の構文拡張の使用が必須ですか?
生のJSのDOM操作がしんどいです。
下記のように非常に大変な作業なのですが、これを解決するには文法の癖の激しいreactやvueなどのフレームワークを使うしかないのでしょうか?
http://qiita.com/kouh/items/dfc14d25ccb4e50afe89
基本的には関数、文法を生のJSで書き、reactなどをDOM操作の部分だけ使うという方法か、...
0
票
1
回答
113
閲覧数
React の cloneElementをreturn したい
Reactで下記のようなコンポーネントを作りました
data は API を受け取るためのものです
const Loop = ({data,children}) => {
return (
<ul>{
data.map((item,index)=> {
return (
React.cloneElement(
...
0
票
1
回答
727
閲覧数
JSXのrender()で別の関数の戻り値だけを出力することができない理由を知りたい
var React = require('react');
module.exports = React.createClass({
renderActually: function() {
return <p>hoge</p>;
},
render: function() {
return {this.renderActually()};
...