[react-jsx] タグが付いた質問
27
件の質問
5
票
1
回答
1,708
閲覧数
text/babel とはなんですか?
Reactのドキュメントを読み始めました。
Getting Started – React に
自前のテキストエディタを使いたい場合は、この HTML ファイルをダウンロード・編集して、ブラウザを使ってからローカルファイルシステムから開くことができます。ランタイムでの遅いコード変換が行われる為、簡単なデモに留めておくことをおすすめします。
とあるので、「このHTMLファイル」...
2
票
1
回答
823
閲覧数
Vue や React では JSX のような JavaScript の構文拡張の使用が必須ですか?
生のJSのDOM操作がしんどいです。
下記のように非常に大変な作業なのですが、これを解決するには文法の癖の激しいreactやvueなどのフレームワークを使うしかないのでしょうか?
http://qiita.com/kouh/items/dfc14d25ccb4e50afe89
基本的には関数、文法を生のJSで書き、reactなどをDOM操作の部分だけ使うという方法か、...
2
票
0
回答
122
閲覧数
prettierにて、printWidthを300くらいにしているにも関わらず改行される
react、typescript, jsxといった技術スタックです。
prettierにて、printWidthを300くらいにしているにも関わらず、
jsxが以下のようになってしまいます。
<text>foo<text/>
↓
<text>
foo
<text/>
typescript自体のコードはしっかり300になるのですが、
...
1
票
2
回答
537
閲覧数
ReactでAxiosを使用し結果を表示する仕組みで、mapのエラー(TS105)となる
Reactを始めたばかりで質問がおかしければ申し訳ございません
単純にAxiosで取得した結果を画面に列挙するだけのを勉強しています
以下のコードです
import React, { useState } from 'react'
import axios from 'axios';
const searchGoogleBooks = async (searchString: string) =&...
1
票
1
回答
55
閲覧数
JSXで { を表示させたい
ReactJS中のJSXの中の { を表示させたいのですが、どのようにすればよいですか?
1
票
1
回答
558
閲覧数
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
回答
924
閲覧数
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
回答
3,408
閲覧数
Next.js内のJSXでmapで二重ループしたい。
ブログを作成していて、記事の背景をループするごとに切り替えていきたくて下記のコード書いたのですが、上手く動作しないです。
map()を使用するのはJSXはレンダーするのに配列にして返す必要があるため、map()を二重にしてカラーを適用した要素を返す事で上手くいくと思っていましたが、画面に何も表示されないです。
教えて頂けないでしょうか、お願いします。
import Head from 'next/...
0
票
1
回答
688
閲覧数
子コンポーネントのuseEffectを発火させないようにするには?
React でウェブツールを作成しています。
親コンポーネントが別のものに変わったとき、子コンポーネントの useEffect が発火しないようにすることは可能でしょうか?
最小のサンプルを用意いたしました。
CodeSandbox: https://codesandbox.io/s/jovial-kowalevski-lkdbx
function ComponentA(props) {
...
0
票
2
回答
962
閲覧数
React + Typescript + MaterialUI 表にレコードを追加したい
reactもmaterialuiも初心者です
質問用に余計なコードを除ければよいのですがすみません
APIから取得したレコードを表に追加表示したいと思い以下のコードを作成しました
import React, { useState } from 'react';
import GenericTemplate from '../lib/GenericTemplate';
import { ...
0
票
1
回答
515
閲覧数
React.jsでコメントアウトができずアロー関数を使った表示ができない
React.jsでアロー関数を使って表記リストを表示しようとしています。
参考書『React.js & Next.js超入門』に掲載されていたプログラムで
Webでサンプルコードのダウンロードができるようなのですが、zipファイルの解凍でエラーが出て見れない状態です。
問題
①React.js部分は、Javaスクリプトなので、以下の記事を参考にすると{// }...
0
票
1
回答
859
閲覧数
JSXで配列をループで回して2個ごとにdivで纏めたい
現在、特定の要素が集まった集合があり、それをループで回して2個の要素毎にdivで纏めたいです。
完成形のHTMLの例を挙げると以下の様な感じです。
<div class="row">
<div class="hoge"/>
<div class="hoge"/>
</div>
<div class="row">...
0
票
1
回答
854
閲覧数
JSXのrender()で別の関数の戻り値だけを出力することができない理由を知りたい
var React = require('react');
module.exports = React.createClass({
renderActually: function() {
return <p>hoge</p>;
},
render: function() {
return {this.renderActually()};
...
0
票
0
回答
25
閲覧数
Reactで複数の画像を表示し、一枚ずつ横スライドをできるようにしたい
現在は複数の画像をwidth70%で横6枚まで表示しそれを超えると改行される状態にしています。
0
票
0
回答
26
閲覧数
ReactでScroll Revealを実装したい時の変数の定義の仕方について
ReactでコンポーネントにScroll Revealを実装したいのですがその際に npmでscroll revealをinstall後、実装したいコンポーネントPost.jsに import scroll reveal を定義しその中でアニメーションさせたいclassnameに対して以下を定義しましたがimportしたscroll revealが反応せずmodule not ...
0
票
0
回答
111
閲覧数
React-hook-formのRegisterを使った場合の値の受け渡しについて
ReactとNext.jsでWEBアプリを作っています。
メインのコンポーネントであるAppと、textarea専用のTextInputコンポーネントがあり、App内でTextInputコンポーネントを呼び出しています。
コンポーネントは分割した状態でないといけないのですが、できればregisterをつかった状態で、Appで入力された値をTextInputコンポーネントに渡す方法はないでしょうか。
...
0
票
1
回答
156
閲覧数
reactにおけるprocessのエラー
現在,reactを用いて,Webサイト開発を行っているものです.
コード内でnedbを用いてデータベースを構築しています.コマンドラインで,$ node "path名"として,実行すると可能なのですが,localhost:3000の方で見ると,以下のエラーが発生しています.
Uncaught runtime errors:
ERROR
process is not ...
0
票
0
回答
138
閲覧数
Can't find variable: document が解決できない(ReactNative,Expo, Stripe, Djangoを使用)
ReactNative、Django歴半年、Stripe歴二ヶ月の新米です。よろしくお願い致します。
ReactNativeでStripeを使用したいのですが、
リロード時に毎回ターミナルに黄文字でエラーが記載されてしまいます。
documentというものは使用していないような気がするのですが、どのようにアプローチすればよいか全くわかりません。
Can't find variable: ...
0
票
1
回答
90
閲覧数
WordPressブロック開発にて<SelectControl>コンポーネントを複数選択にしたい
前提
teratailでも同様の質問をさせていただきました。
WordPressのブロック開発を行っています。
MAMPでローカル環境を構築しプラグインとしてカスタムブロックを追加して開発を行っています。
実行環境:
WordPress 5.9.2
npm 8.1.2
node.js 16.13.1
実現したいこと
投稿の情報を取得してコンポーネントで複数選択可能なブロックを作成する。
...
0
票
1
回答
191
閲覧数
作りながら学ぶreact入門 〜インストール手順 Mac編〜 でエラー
https://github.com/yuumi3/react_book/blob/master/docs/install_mac.md を参考に進めたところ、npm start でエラーが発生してしまいます。
> [email protected] start
> webpack serve
[webpack-cli] Invalid options object. Dev ...
0
票
1
回答
2,789
閲覧数
reactで複数のチェックボックス(全選択・全解除)実装したい
現在、next.jsで実装を進めているのですが、上記にある通り、複数のチェックボックスのチェック状態をstateで管理、また違うコンポーネントにあるボタンを押すとチェック状態が全選択もう一度押すと全解除というような実装をしたいのですが、どのようにすれば良いのか見当がつきません。
また、複数のチェックボックスというものはapiのデータから作られており、子コンポーネントでmapで回している状態です。
...
0
票
1
回答
1,648
閲覧数
TypeScript components内でmap()を使用するとエラーが出る。
<span>タグに topic を代入して出力するコンポーネントを作成したいのですが、 (property) topicList: string[] ',' expected.ts(1005) と出て .map が使えないみたいな表示がされます。なぜこのようになるのか分からないです。コードを見て頂けないでしょうか?
//topicListには["javascript"...
0
票
1
回答
1,112
閲覧数
Next.jsで<Layout home>のhomeがどこから来る変数か分からない。
Next.jsチュートリアルで下記のコードが分からず困っています。
export default function Layout({ children, home }) { ここで childrenとhomeという引数が指定されていています。 index.js で呼び出す際に <Layout home> と 引数に home を取っていると思われるのですが、 この home が ...
0
票
1
回答
2,020
閲覧数
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
回答
321
閲覧数
jsxファイルをjsファイルで記述するにはどんなパッケージが必要なのでしょうか?
create-react-appにでプロジェクトを開始すると、最初から拡張子が.jsファイル内にjsx記法を使うことができますが、一体どのパッケージがその処理を担っているのでしょうか
react-scriptsがよしなにやってくれているとは思うのですが、
react-scriptsは裏側でいろんなパッケージをinstallしていたり設定ファイルを書いていたりするイメージがあり、...
0
票
1
回答
121
閲覧数
React の cloneElementをreturn したい
Reactで下記のようなコンポーネントを作りました
data は API を受け取るためのものです
const Loop = ({data,children}) => {
return (
<ul>{
data.map((item,index)=> {
return (
React.cloneElement(
...
0
票
1
回答
809
閲覧数
React Typescript 関数の引数の書き方
前提・実現したいこと
親コンポーネントで子コンポーネントに渡す関数を定義したいのですが、引数をどう書いたらいいのかがわかりません。
わかる人がいたら教えて欲しいです
該当のソースコード
**types.ts**
export type Task {
id: number
text: string
done: boolean
}
//親コンポーネント
import React, {...