umd形式でのみ提供されているブラウザ用ライブラリのReactによる動的読み込みとその完了検知の方法

投稿者: Anonymous React.js を用いて Web サイトを開発しています。 モジュール形式で提供されていない、<script> タグで読みこんでグローバルオブジェクト(window)に追加されたオブジェクトを利用するタイプの外部スクリプトを、React.js でうまく扱う方法についての質問です。 たとえば、決済代行業者 PAY.JP が提供する payjp.js はまさにそのパターンで、素の HTML の場合は以下のようにして利用できます: <!– 外部スクリプトのロード –> <script src=”https://js.pay.jp/v2/pay.js”></script> <!– ロードしたスクリプトを用いて各種処理を実行 –> <script> // スクリプトによってグローバル空間に定義された `Payjp` を用いる const payjp = Payjp(‘API キー’) payjp.foo() // 何らかの処理 </script> こういった外部スクリプトを React.js で扱う場合、以下のような問題点があると考えます: <script> を書く位置を気を付けないと、コンポーネントのライフサイクルの中でスクリプトが二重にロードされることがある グローバル空間にロードが完了したタイミングを動的に検知する必要がある 1 については、コンポーネントではなくテンプレート HTML 側に <script> を記述したり、Next.js のようなテンプレートがないフレームワークでは Layout コンポーネントの中で <script> を記述することで、何とかなると思っています。…(Continue Reading)

¿ Cuál es el objetivo de usar bind(this) en un método en JS?

publicado por: Anonymous ¿Por qué en el método filter tengo que usar .bind(this) como sigue: onChange={this.filter.bind(this)}, en vez de solo usar el método filter sin .bind(this) como en onChange={this.filter}? export default class TodoList extends React.Component { filter(event) { this.props.store.filter = event.target.value } render() { return <div> <h1>toDos</h1> <input className=”filter” onChange={this.filter.bind(this)} /> </div> } } solución…(Continue Reading)

TypeScriptのgenericsを使ったReactコードのコンパイルが通らなくて困っています

投稿者: Anonymous 再現コードは最小限にシンプルにしたので、意味自体はありません。 interface TextProps { data: { text: string }; } interface ObjProps { data: object; } const Para: React.FC<TextProps> = ({ data }) => <p>{data.text}</p>; const Json: React.FC<ObjProps> = ({ data }) => <pre>{JSON.stringify(data)}</pre>; const make = <T extends { data: {} }>(Elem: React.FC<T>, data: T[‘data’]) => <Elem data={data} />; export const res1…(Continue Reading)

Duda sobre un useState como objeto con arrays

publicado por: Anonymous tengo una pequeña duda, tengo un estado como este const [searchItems, setSearchItems] = useState({ videos: [], texts: [], audios: [] }); Mi idea es hacer push a estos arrays dentro del objeto searchItems, si fuera javascript puro seria algo asi como seachItems.videos.push(object) pero al ser un estado con useState, debo hacer uso…(Continue Reading)

発行されたActionをどうやって対応するReducerに渡しているのか

投稿者: Anonymous はじめて、質問を投稿させていただきます。 4月から新卒としてWeb系企業に勤めています。 幸運なことに新規案件に携わることができ、とても楽しくエンジニア生活をスタートさせることができました。 今現在はReactとReduxを使って開発を行っていますが、そこでどうしても理解できないことがありましたので、それをご質問させていただきたいです。 複数のActionと複数のReducerが存在する場合、発行されたActionはどうやって自分自身が処理対象となっているReducerを特定しているのでしょうか? 先輩からは下記のように複数の互いに依存しないActionがある場合には、それ毎にReducerを作成し、Stateを変更する必要がある。ということで教わりました。 複数のReducerが存在する場合は、combineReducersでrootReducerを作成しcreateStoreに対して、渡してあげる必要があることも教わりました。 // Action export const actionA = status => ({ type: ‘A_ACTION’, status }) export const actionB = status => ({ type: ‘B_ACTION’, status }) // Reducer export const actionAReducer = (state = false, action) => { switch(action.type) { case ‘A_ACTION’: return action.status default: return state }…(Continue Reading)

Cambiar color de un div cuando se hace scroll js

publicado por: Anonymous Tengo un nav con el id “navbar”. Al igual que tiene la propiedad Fixed por lo cual siempre esta al top de la pagina,Que quiero que al hacer scroll hacia abajo, cambie de color por lo cual tengo el siguient metodo: window.addEventListener(“DOMContentLoaded” , () => { var element = document.getElementById(“navbar”); document.addEventListener(“scroll”, ()…(Continue Reading)

Reactでinput type=”text”のvalueをボタンを押すことでリセットしたい。

投稿者: Anonymous Reactでテキストフォームをリセットする方法をご教示いただけないでしょうか。 下記は動作デモです。 demo テキストフォームに「ok」を入力し「check」ボタンを押すことで”ok”というアラートが表示されます。 テキストフォームに「ok」以外を入力し「check」ボタンを押した場合は、”no”というアラートが表示されます。 デモにおいて、「clear」ボタンを押すことで、テキストフォームをクリア(空に)したいです。 ソースコード _x000D_ _x000D_ import React from “react”;_x000D_ _x000D_ let text = “”;_x000D_ _x000D_ const App = () => {_x000D_ const inputValue = e => {_x000D_ text = e.target.value;_x000D_ };_x000D_ _x000D_ const check = () => {_x000D_ if (text === “ok”) {_x000D_ alert(“ok”);_x000D_ return;_x000D_ }_x000D_ alert(“no”);_x000D_ };_x000D_ const…(Continue Reading)

React で prop 受け渡しの shorthand はありますか?

投稿者: Anonymous 例えば Component の extra という props を固定したコンポーネントを作るときに const HogeComponent = props => <Component {…props} extra=’hoge’ /> と書けますが、以下のように省略して書く方法はありますか? const HogeComponent = Component.bind({ extra: ‘hoge’ }) 解決 High-Order Component(通称HoC)を利用する方法があります。書き方は独特ではありますが、デザインパターンのFactory Methodパターンとやっていることは変わりません。コンポーネントを作る関数を定義してあげればよいのです。 例えば、コメントを投稿するユーザー名を固定するコンポーネントを使いまわしたいとき、次のようのにかけます。 import React from “react”; const Comment = props => { return ( <div> <p className=”name”> <strong>{props.name}</strong> </p> <p className=”message”>{props.message}</p> </div> ); }; const createComponent…(Continue Reading)

Next.jsのgetStaticPaths内でParamsを参照できますでしょうか

投稿者: Anonymous 最近Next.jsを個人で触り始め、現在Next.js Ver9.3.5でネストした動的ルーティングを実装しようとしています。 やりたいこと やりたいことは /tokyo/shinjuku/ のようなページでの getStaticPathsの動的な実装です。 フォルダ構造は以下のようです。 [prefecture_name_e]/index.jsでは動的である必要がなかったため[prefecture_name_e]/[city_name_e]/index.jsで getStaticPathsの動的な実装を行おうとしています。 $ tree pages/ pages/ ├── [prefecture_name_e] │ ├── [city_name_e] │ │ └── index.js │ └── index.js ├── _app.js └── index.js 実現のためやってみたこと [prefecture_name_e]/[city_name_e]/index.js ファイルにて getStaticPathsの実装を以下のようにやろうとしました。 getStaticProps({ params })と同じようにParamsを使ってみました。 export async function getStaticPaths({params}) { // その都道府県の市区町村一覧を取得します const res = await fetch(`${process.env.apiHost}/prefectures/${params.prefecture_name_e}/cities`) const json = await…(Continue Reading)

Reduxの言葉、日本語で何という?

投稿者: Anonymous Reactの開発をし、Reduxも使っています。ドキュメンテーションを書いている中でReduxについて書いているのですが、下記の言葉を日本語で何というのか分かりません。 React Redux Actions Action Creator Reducer ただ「アクション」とかのようなカタカナの言葉になるのでしょうか。 よろしくお願いします。 解決 React, Reduxは固有名詞で翻訳はできません。 Actions、Action Creator等についてもReduxで使うActionであり、Reduxで使うAction Creatorなので、日本語の単語への翻訳(活動、アクション生成器とか縮約器)はなじまないでしょう。見たことはないし、違和感があります。 React →そのまま Redux →そのまま Actions →そのままか、アクション、意訳すれば「Reduxのアクション」 Action Creator→そのままか、アクションクリエイター、意訳すれば「Reduxのアクションクリエイター」 Reducer→そのままか、意訳すれば「ReduxのReducer」 などが妥当なのではないでしょうか。 回答者: Anonymous

typeやinterfaceを使用せず、複数ある引数に型を付与したい。

投稿者: Anonymous typeやinterfaceを使用せず、複数ある引数に型を付与しする方法をご教示いただけないでしょうか。 下記は子コンポーネントにstateとsetStateを渡しているデモです。 demo デモでは子コンポーネントの引数の型はtypeで記述しています。 引数が複数の場合かつ少ない場合だとtypeやinterfaceで定義するのは冗長かと思い、typeやinterfaceを使用せずに型を付与したいです。 ソースコード import * as React from “react”; export default function App() { const [toggle, setToggle] = React.useState(false); return ( <> <h1>demo</h1> <p>{toggle ? “true” : “false”}</p> <hr /> <Child toggle={toggle} setToggle={setToggle} /> </> ); } type ChildProps = { toggle: boolean; setToggle: (value: boolean) => void; }; const…(Continue Reading)

ReactもしくはNode.jsで、既存のPDFをフォーマットに使用し、PDF出力を行いたい

投稿者: Anonymous 実現したいこと 現在 フロントエンドをReactでサーバレス環境(Firestore + Cloud Functions)にてWEBの開発を行なっています。 開発の仕様で、既存のPDFをフォーマットに使用して(値をあてはめて)PDFを出力したいのですが、ライブラリ等を調査したところクライアントサイド(React)だけでは既存のPDFをフォーマットに使用しての出力する糸口が見つかっておりません。 Cloud Functions(node.js)も利用しているので、node.js側でも解決できないものか調査を進めているのですが、実現方法ございますでしょうか?? 調査した情報(ライブラリ)とメモ React-PDF https://github.com/diegomura/react-pdf PDFkit https://github.com/foliojs/pdfkit pdf-image https://github.com/mooz/node-pdf-image pdfmake http://cly7796.net/wp/javascript/started-with-pdfmake/ https://qiita.com/maecho/items/071abbb60dcbeabef7a6 解決 PDFの編集は非常に手間の係る作業になります。既存のPDFをフォーマットに使う場合、その編集は注釈(Annotation)で値を入力して表示するのが一番楽だと思います。その場合でも、各々の値ごとに出力する位置を0.1mm単位で決める必要があります。もし、フォーマットが少しでも変更になれば、位置がずれてしまうため、位置を全部修正する必要があるのでメンテナンスも大変です。 そのため、既存のPDFを使わずに、HTMLで様式を作成してCloud FunctionsでPuppeteerを使ってPDFに変換した方ははるかに楽にできると思います。 それでも、既存のPDFをフォーマットとして使いたいのであれば、英語版の Edit existing PDF in a browser という質問が参考になると思います。自分が使ったことがないので保証はできませんが、そこのコメントに書いてある PDFNetJSを使えば、フロントエンドでPDFの修正ができるのではないでしょうか。 印刷したいだけであれば、pdf.jsとpdf-annotate.jsを使えばできるように思います。 回答者: Anonymous

Como manejar en una tabla un evento de selección de una filas cargadas con datos mapeados de un arreglo?

publicado por: Anonymous Tengo una tabla que es cargada con datos de un API He cargado en el los datos exitosamente pero ahora deseo manejar una selección de la fila que desee elegir el usuario. Cómo puedo solucionar esto? solución puedes usar un evento click en jquery y obtener el valor del tr y hacerle…(Continue Reading)

react-routerで親で定義したcomponentが表示されない

投稿者: Anonymous react-routerを使ったアプリで下記のルーターを定義して、一番外側のRootにmaterial-uiのAppBarとLeftNavを定義しましたがそれらが表示されませんし、divも表示されていません。しかしその子供のViewは表示されています。 router.js export default ( <Route path=”/” component={Root}> <Route path=”path1″ component={App1}/> <Route path=”path2″ component={App2}/> <Route path=”path3″ component={App3}/> </Route> ); Root.react.js import React, { Component } from ‘react’; import { LeftNav, MenuItem, AppBar } from ‘material-ui’; class Root extends Component{ static propTypes = { children: React.PropTypes.any }; constructor(props){ super(props); this.state = { open: false…(Continue Reading)

Como llenar un objeto con propiedades tipo array?

publicado por: Anonymous Hola tengo un componente en React que tiene un state tipo objeto: items: {} y mi objetivo es llenarlo con propiedades tipo arreglo. Ejemplo si ingreso en un input un valor Gato se cree : items:{ Gato[] } y si luego ingreso otro valor se cree items: {Gato[], Perro[],…etc}. En la variable…(Continue Reading)

reactのチュートリアルはなぜポート番号を指定?

投稿者: Anonymous ポート番号指定について reactチュートリアルのサーバサイドが分からないので教えてください。 ・最終的に下記へアクセスして確認するみたいですが、なぜポート番号を指定しているのでしょうか? And visit http://localhost:3000/. ・server.phpを見るとポート処理が書いてあるのですが、これは何のため? ・ないとセキュリティ的にマズい? ・それとも開発確認用途で記述しているだけ(?)で、削除しても良い? ・アクセス先をhttp://localhost/hoge/みたいに変更するにはどうすれば良いでしょうか? 手順 ・手順的には、下記3つのコマンドを打てば良いのでしょうか? ・expressは自動的に入る? ・npm install ・node server.js ・php server.php 解決  ポート番号を指定しているのは、開発用途で標準のポートと衝突しないようにするためです。セキュリティには関係無いです。  http://localhost/hoge/のようにしたい場合は、apacheやnginxなどでリバースプロキシを設置したりする方法があります。説明は大変なので、詳細は調べてみてください。  server.phpはphpでサーバーを起動したい場合に使うもので、server.jsをphpで書き換えたものです。よって、npm installしたあとは、node server.jsかphp server.phpのいずれかのみで構いません。 回答者: Anonymous

何故「Uncaught Invariant Violation: Maximum update depth exceeded.」というエラーが出るのかわかりません。

投稿者: Anonymous 現在reactを使ってフロントエンドの開発をしているのですが、Uncaught Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.というエラーが出るが、どう対処すれば良いか解らず困っており質問させていただきました。 今やろうとしている事を説明させていただきます。 やろうとしていることは、ある複数のデータ(hogeとする)に基づいた画像をクリックしたらポップアップが表示されるという事をしようとしています。 そしてこの画像とポップアップとこれらを表示する大元の画面で三つのコンポーネントを定義しました。 Hoges.js: import React from “react” import PropTypes from “prop-types” import HogeImage from “./HogeImage”; import loadsh from ‘lodash’; import Popup…(Continue Reading)

TypeScript+React構成におけるMaterial-UIの型エラー

投稿者: Anonymous 概要 現在、React + TypeScript + Material-UIを用いた開発を行っていますが、エラーが発生致しました。Material-UIのCSS in JSを用いているのですが、その中のtoolbarで下記の様なエラーが発生致しました。TSの型エラーだということは分かるのですが、解決方法は分からず…。 自分なりに色々調べてみましたが、問題に該当する記事が見つけられませんでした…。 どなたか解決方法のご教授お願い致します。 エラーの内容 型 ‘CSSProperties’を型 ‘CSSProperties | CreateCSSProperties <{}> | ((props:{})=> CreateCSSProperties <{}>) ‘に割り当てことはできません。型’ CSSProperties ‘を型’ CreateCSSProperties <{}> ‘にレジストリことはできません。 該当するコード import React from ‘react’ import styled from ‘styled-components’ import { createStyles, makeStyles, Theme } from ‘@material-ui/core/styles’ // ここのtoolbarでエラーが発生 const useStyles = makeStyles((theme: Theme) => createStyles({…(Continue Reading)

Modificar estado desde un componente usando React.createElement

publicado por: Anonymous Tengo un gran problema, el objeto this me aparece como indefinido cuando es llamado desde el input text Primer nombre class FormularioDeInscripcion extends React.Component{ constructor(props){ super(props); this.state = {nombre:””,primerApellido:””,segundoApellido:””,correo:””,tipoDocumento:””,documento:””}; this.actualizarEstado = this.actualizarEstado.bind(this); } listaTipoDeDocumento = <select> <option value=”CC”>Cédula</option> <option value=”CE”>C. Extrangería</option> </select>; primerNombre = React.createElement( “input”, {type:”text”,id:”primerNombre”,name:”primerNombre”,className:”estiloTxt”, onChange:this.actualizarEstado} ); segundoNombre = React.createElement(…(Continue Reading)

React + Typescript + MaterialUI 表にレコードを追加したい

投稿者: Anonymous reactもmaterialuiも初心者です 質問用に余計なコードを除ければよいのですがすみません APIから取得したレコードを表に追加表示したいと思い以下のコードを作成しました import React, { useState } from ‘react’; import GenericTemplate from ‘../lib/GenericTemplate’; import { makeStyles } from ‘@material-ui/core/styles’; import Table from ‘@material-ui/core/Table’; import TableBody from ‘@material-ui/core/TableBody’; import TableCell from ‘@material-ui/core/TableCell’; import TableContainer from ‘@material-ui/core/TableContainer’; import TableHead from ‘@material-ui/core/TableHead’; import TableRow from ‘@material-ui/core/TableRow’; import Paper from ‘@material-ui/core/Paper’; import apiTransactionHistoryCoin from ‘../lib/apiTransactionHistoryCoin’ const…(Continue Reading)

ReactのJSX内でmap()を使用した際のエラー

投稿者: Anonymous 概要 現在、React + Pusherでリアルタイムのチャット機能を実装していますが、jsxの部分で下記のエラーが発生しました。 具体的には、取得した全メッセージの内容をjsx内でmap()を使用して表示しているのですがそこでエラーが発生しています。 自分なりに色々調べてArray.from()でオブジェクトを配列に変換しましたが、解決せず…。 どなたか解決方法のご教授お願い致します。 <Chat.get()でconsole.log()した結果> useEffect内のChat.get()で下記の様な、データベースに保存されたチャットの内容がバックエンドのLaravelから返ってきます。 これをjsx内(messageList)でArray.from(messages).map()で回しています。 {messages: Array(10)} messages: Array(10) 0: id: 3 board_id: “ldqc10ol” user_id: “a” message: “hello” created_at: “2020-02-14 09:16:27” updated_at: “2020-02-14 09:16:27” __proto__: Object 1: {id: 4, board_id: “ldqc10ol”, user_id: “a”, message: “d”, created_at: “2020-02-14 09:21:23”, …} 2: {id: 5, board_id: “ldqc10ol”, user_id: “a”, message: “l”,…(Continue Reading)

Duda con funciones en javascript, react js

publicado por: Anonymous porque cuando pongo una función de esta manera,el this.state, no me esta trayendo los valores que le paso cuando escribo en los input fnLogin(event){ debugger; event.preventDefault(); this.setState(obtenerToken(this.state)); // this.state es marcado como undefined this.props.fnSetToken(this.state.token); } Este es mi código, cuando escribo en los input, cada input cuenta con un valor en el…(Continue Reading)

LinkedStateMixinでsetStateのコールバックを指定する方法はありますか?

投稿者: Anonymous React.jsのsetStateメソッドにコールバックを渡すと、Stateの更新が終わった時にそのコールバックを実行してくれます。 しかしsetStateを抽象化したLinkedStateMixinにはコールバックを指定する方法を見つけられませんでした。 どうにかしてLinkedStateMixinを利用しつつsetState後の処理を渡すことはできないでしょうか? 解決 LinkedStateMixinの実装を見てみると、 https://github.com/facebook/react/blob/v0.12.2/src/addons/link/LinkedStateMixin.js#L34 https://github.com/facebook/react/blob/v0.12.2/src/core/ReactStateSetters.js#L59 ここにsetStateがあります。 コールバックを外から指定できそうにないですね。 状態変化後に何らかの処理を行う他の手段としては、componentDidUpdateを利用する方法が考えられます。 回答者: Anonymous

ReactのcomponentWillUnmountでbeforeunload的なことがしたい

投稿者: Anonymous Reactでbeforeunloadを使いたいのですが、windowのスコープの範囲に収まらないbeforeunloadイベントを拾えないため、componentWillUnmountが呼ばれたタイミングでconfirm関数を呼び、キャンセルされればcomponentWillUnmountをpreventしたいです。 やりたいことは以下のような感じです。 componentWillUnmount: function(e) { var result = confirm(‘遷移してもよろしいですか?’); if (!result) { // prevent unmount } }, 解決 componentDidMountの時listenerを追加で、componentWillUnmountの時外せばいいと思います。 onUnload(event) { var result = confirm(‘遷移してもよろしいですか?’); if (!result) { // prevent unmount }       } componentDidMount() { window.addEventListener(“beforeunload”, this.onUnload) } componentWillUnmount() { window.removeEventListener(“beforeunload”, this.onUnload) } 回答者: Anonymous

react nativeでコンポーネントのアップデートの仕方について教えてください。

投稿者: Anonymous 初めまして。 お世話になります。 React Nativeのことで質問です。 React-Native-cliを利用してプロジェクトを作成したのですが、package.json内のreactのバージョンが^16.3.0-alpha.1となってしまっている影響か、次のようなWarningが出るようになりました。 Warning: componentWillReceiveProps is deprecated and will be removed in the next major version. Use static getDerivedStateFromProps instead. Warning: componentWillMount is deprecated and will be removed in the next major version. Use componentDidMount instead. As a temporary workaround, you can rename to UNSAFE_componentWillMount. Warningの内容は、ライフサイクルで使用される関数が変わるので変更するように、とのことですが、npmを利用すればいいのかどうしていいのか全くわかりません。 これらのWarningを解決する方法をGoogle等で検索してみたのですが、自分では見つけることができませんでした。 もし解決方法をご存知であれば、ご教授くださると大変助かります。 どうぞよろしくお願いします。 解決 まだ新しいので情報が少ないですね。自分も探り探り使っています。…(Continue Reading)

¿Cómo puedo llamar 2 métodos a la vez dentro de un evento onChange?

publicado por: Anonymous Quiero realizar dos eventos dentro de un input, como puedo llamar a los dos de manera continua o como tendría que declarar el método? Yo traté de la siguiente forma pero me arroja error, podrían darme alguna sugerencia? mi entrada <input style={styles.input} placeholder=’Introduce tu nombre’ type=’text’ name={this.state.nombre} onChange={this.bChange, this.hChange}> y los eventos…(Continue Reading)

validar input que solo admita letras en reactjs

publicado por: Anonymous tengo un problema al querer validar un input, que solo se utilicen letras en react codigo de la funcion: class REGISTRARUSER extends Component{ constructor(props){ super(props); this.state={ nombre: ”, email:” }; this.handlkeyPress = this.handlkeyPress.bind(this); this.handleChangeInput = this.handleChangeInput.bind(this); }; handlkeyPress(evento){ // console.log(String.fromCharCode(event.keyCode)); let tecla = evento.which; let caracter = String.fromCharCode(tecla) let regex = new…(Continue Reading)