タグ付けされた質問 「reactjs」

ブラウザでプロジェクトを実行すると、次のエラーが発生しました。 コンパイルに失敗しました： ./node_modules/@material-ui/lab/esm/internal/svg-icons/Close.js Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'. Autocompleteコンポーネントを実装しようとしています（「複数の値」セクションの例から）。 これが私が使っているコードです： import React from 'react'; import Chip from '@material-ui/core/Chip'; import Autocomplete from '@material-ui/lab/Autocomplete'; import TextField from '@material-ui/core/TextField'; <Autocomplete multiple id="tags-standard" options={top100Films} getOptionLabel={(option) => option.title} defaultValue={[top100Films[13]]} renderInput={(params) => ( <TextField {...params} variant="standard" label="Multiple values" placeholder="Favorites" /> )} /> …

11 reactjs  typescript  material-ui 

シンプルにした <If />Reactを使用し関数コンポーネントを。 import React, { ReactElement } from "react"; interface Props { condition: boolean; comment?: any; } export function If(props: React.PropsWithChildren<Props>): ReactElement | null { if (props.condition) { return <>{props.children}</>; } return null; } 次のようなよりクリーンなコードを記述できます。 render() { ... <If condition={truthy}> presnet if truthy </If> ... ほとんどの場合、問題なく機能しますが、たとえば、指定された変数が定義されていないかどうかを確認してから、それをプロパティとして渡したい場合は、問題になります。例を挙げましょう： <Animal />次の小道具を持つコンポーネントが呼び出されたとしましょう： interface …

11 javascript  reactjs  typescript 

TL; DR 親コンポーネントは、その下にあるすべての子コンポーネントのレンダリングが完了し、最新バージョンのDOMがユーザーに表示されるタイミングをどのようにして知ることができますか？ 孫コンポーネントで構成されるcomponent A子Gridコンポーネントを持つがあるとし3x3ます。これらの孫コンポーネントはそれぞれ、Restful APIエンドポイントからデータをフェッチし、データが利用可能になるとそれ自体をレンダリングします。 私は、全体の面積をカバーしたいComponent Aとloader、それはDOM上ですでにだと見ることができるように、グリッド内のコンポーネントの最後が正常にフェッチされたデータを持っているときにのみ発表し、それをレンダリングする、プレースホルダ。 ユーザーエクスペリエンスは、「ローダー」から、ちらつきのない完全に配置されたグリッドへの非常にスムーズな移行である必要があります。 私の問題は、ローダーの下のコンポーネントをいつ公開するかを正確に知ることです。 これを絶対的な精度で行うために信頼できるメカニズムはありますか？ローダーの時間制限をハードコーディングしないでください。私が理解ComponentDidMountしているように、呼び出し時にコンポーネントがユーザーに完全に表示されることを実際に保証するわけではないため、すべての子に依存することも信頼できません。 質問をさらに蒸留するには： ある種のデータをレンダリングするコンポーネントがあります。それが初期化された後は持っていないので、その中componentDidMountでAPIエンドポイントにヒットします。データを受信すると、状態を変更して反映します。これは当然、そのコンポーネントの最終状態の再レンダリングを引き起こします。私の質問はこれです：それはしている再レンダリングするときに私が知っているどのように行われ、反射ユーザ直面DOMに。その時点！=コンポーネントの状態がデータを含むように変化した時点。

11 reactjs 

男は私が問題に直面しています。2次元データがあります。データには、リンクを含むネストされた構造があります。 const data = [ // First Div Panel [ { id: 1, url: "/services", title: "Services" }, { id: 2, title: "Products", children: [ { id: 3, url: "/themes-templates", title: "Themes & Templates" }, { id: 4, url: "/open-source", title: "Open Source" }, { id: 5, url: "/solutions", title: …

11 reactjs 

Reactの単一ページアプリケーションを作成していますが、スクロール復元がChrome（およびおそらく他のブラウザー）で期待どおりに動作していないようです。 react-router-dom githubリポジトリには、ブラウザーが単一ページアプリのスクロールをネイティブで処理し始めていることを示すページがあり、にhistory.scrollRestoration設定されている場合、動作は従来の非SPA Webページの動作と同様になります。auto。 私が必要とする動作はそのページに示されています： ナビゲーションを上にスクロールして、一番下までスクロールした新しい画面を開始しないようにします。 「戻る」および「進む」クリック（ただし、リンククリックは除く）でのウィンドウとオーバーフロー要素のスクロール位置の復元 しかし、タブやカルーセルを含むルートの動作も無効にする必要があります。 問題に関するChromeの仕様へのリンクは次のとおりです。 OS XのChromeバージョン78.0.3904.97（公式ビルド）（64ビット）で私が観察しているのは、私がhistory.scrollRestoration manual設定から期待しているように見えるものです。つまり、ページの下半分までスクロールしてリンクをクリックすると、次のページが前のページと同じポイントまでページの下半分までスクロールされます。 私はhistory.scrollRestorationさまざまな時点でを確認しましたが、それが開始して留まることauto、デフォルト、 ここでの重要なポイントの1つは、@ TrevorRobinsonの回答によるものです。「スクロール復元時のブラウザの自動試行... ...ほとんどの場合、単一ページのアプリでは機能しません...」OK ...の一貫したサポートが見つかりましたhistory.scrollRestorationが、どうやらブラウザは、実際にスクロールの復元を行っているのがおかしい。次に、ここで注意する必要がありますで。これ、今日の時間を節約できました。 次に、これを手動で行う方法を調べましたが、先の方法がわかりません。react-router-scrollは、React Router v4と互換性がないと述べていますが、この質問の時点で最新のv5については触れていません。では、v5にも互換性がないと思いますか？ 私は前方の道のために、さらに見て、約このSOの答えは見つかったので、ルータのV4に反応してスクロール復元を処理する方法を ...万一、私はそれが前提となりますルータV5に反応して動作しますか？更新：v5では私には機能しないようです。私はいくつかの構成を試しました。また、React Router v4で完全に機能させることもできませんでした。新しいページの一番上までスクロールしていたので、少なくとも生きていることはわかっていましたが、履歴の復元は行われません。 また、react-router-scroll-memoryも機能しましたが、タブやカルーセルに必要なものなど、指定されたルートでのスクロールを無効にするオプションはありません。 私はoaf-react-routerの使用を検討しましたが、特定のルートのスクロール復元またはトップへのスクロールの無効化に関するドキュメントには何も記載されていません。編集：私の回答で概説されているように、実際にこれを処理します。 見落としていることはありますか？この機能を必要とするのは私だけではないため、この問題に対処するための標準は何ですか。エッジの効いた、実験的なことをしているようですが、通常のサイトと同じようにスクロールする必要があります。

11 javascript  reactjs  google-chrome  react-router 

TypeScript、Jest、Webpack、Babelを使用して構築されたReactアプリケーション（Create React Appを使用していない）があります。「yarn jest」を実行しようとすると、次のエラーが発生します。 すべてのパッケージを削除して再度追加してみました。これは解決されません。私は同様の質問とドキュメントを見ましたが、それでも何かを誤解しています。私はこの環境をゼロからセットアップするための別のガイドに従うまで行っても、私のコードでこの問題を受け取りました。 依存関係は... "dependencies": { "@babel/plugin-transform-runtime": "^7.6.2", "@babel/polyfill": "^7.6.0", "babel-jest": "^24.9.0", "react": "^16.8.6", "react-dom": "^16.8.6", "react-test-renderer": "^16.11.0", "source-map-loader": "^0.2.4" }, "devDependencies": { "@babel/core": "^7.6.0", "@babel/preset-env": "^7.6.0", "@babel/preset-react": "^7.0.0", "@types/enzyme": "^3.9.2", "@types/enzyme-adapter-react-16": "^1.0.5", "@types/jest": "^24.0.13", コンポーネントのインポート行... import * as React from "react"; import { BrowserRouter as Router, Route, …

11 reactjs  jestjs  babeljs  babel-jest  ts-jest 

React-Reduxでのエラー処理のより一般的な方法または正しい方法を理解したいと思います。 電話番号登録コンポーネントがあるとします。 そのコンポーネントは、入力された電話番号が無効である場合にエラーをスローします そのエラーを処理する最良の方法は何でしょうか？ アイデア1： エラーを受け取り、エラーが渡されるたびにアクションをディスパッチするコンポーネントを作成する アイデア2： エラーはそのコンポーネントに関連しているため、そのエラーをコンポーネントに渡します（コンポーネントはreduxに接続されていません。つまり、エラーハンドラーコンポーネントはアクションをディスパッチしません）。 質問：誰かがReact-Reduxでの大規模アプリのエラー処理の適切な方法について私を案内してくれませんか？

11 reactjs  redux 

プロジェクトでDrawerナビゲーションを設計します。 次のコマンドでインストールしました： npm install @react-navigation/drawer 次にそれをインポートしました App.js import { createDrawerNavigator } from '@react-navigation/drawer'; import { NavigationContainer } from '@react-navigation/native'; これは私のpackage.jsonコンテンツです： "@react-native-community/masked-view": "^0.1.6", "@react-navigation/drawer": "^5.0.0", "react": "16.9.0", "react-native": "0.61.5", "react-native-gesture-handler": "^1.5.6", "react-native-reanimated": "^1.7.0", "react-native-screens": "^2.0.0-beta.1", "react-native-view-shot": "^3.0.2", "react-navigation": "^4.1.1", "react-navigation-stack": "^2.1.0", これは私のApp.jsコンテンツです： const App = () => { const Drawer = …

10 reactjs  react-native  navigation-drawer  react-navigation 

useEffectフックの詳細を理解しようとしています。 どの方法をいつ使用するのか、なぜ知りたいのですか？ 1.useEffect with no second paraments useEffect(()=>{}) 2.useEffect with second paraments as [] useEffect(()=>{},[]) 3.useEffect with some arguments passed in the second parameter useEffect(()=>{},[arg])

10 javascript  reactjs  react-redux 

UIがちらつくのを避けるために、ページがサーバー側でレンダリングされ、Next.jsを使用して返信される前に、ユーザーがログインしているかどうかを知る必要がある場合があります。 ユーザーが既にこのHOCコンポーネントを使用してログインしている場合に、ユーザーが一部のページにアクセスできないようにする方法を見つけることができました... export const noAuthenticatedAllowed = (WrappedComponent: NextPage) => { const Wrapper = (props: any) => { return <WrappedComponent {...props} />; }; Wrapper.getInitialProps = async (ctx: NextPageContext) => { let context = {}; const { AppToken } = nextCookie(ctx); if (AppToken) { const decodedToken: MetadataObj = jwt_decode(AppToken); const isExpired = …

10 javascript  reactjs  typescript  next.js 

外部（node_modules）パターンライブラリからコンポーネントをレンダリングしています。私のメインアプリでは、次のLinkようにインスタンスをreact-router-dom外部ライブラリのコンポーネントに渡します。 import { Link } from 'react-router-dom'; import { Heading } from 'my-external-library'; const articleWithLinkProps = { url: `/article/${article.slug}`, routerLink: Link, }; <Heading withLinkProps={articleWithLinkProps} /> 私のライブラリでは、それを次のようにレンダリングしLinkています： const RouterLink = withLinkProps.routerLink; <RouterLink to={withLinkProps.url} > {props.children} </RouterLink> RouterLinkクリックされたときにURLに移動しても正しくレンダリングされているようだ、と。 私の問題は、がRouterLink私のAppのreact-router-domインスタンスから切り離されているように見えることです。をクリックするとHeading、「ハード」にナビゲートし、Link通常のようにシームレスにルーティングするのではなく、ページをポストバックします。 この時点でシームレスにナビゲートできるようにするために何を試したらよいかわかりません。何か助けや助言をいただければ幸いです。よろしくお願いします。 編集：ルーターの設定方法を示しています。 import React from 'react'; import { hydrate, unmountComponentAtNode } from 'react-dom'; …

10 javascript  reactjs  react-router-dom 

私は他のモバイルチャットアプリを模倣しようとしています。send-messageテキストボックスを選択して仮想キーボードを開くと、一番下のメッセージがまだ表示されています。CSSでこれを驚くほど実行する方法はないようです。そのため、JavaScript resize（明らかにキーボードが開いているときと閉じているときを確認する唯一の方法）イベントと手動でスクロールして救助します。 誰かが提供するこのソリューションを、私は見つけたこのソリューションの両方が動作するように見えます。 1つの場合を除いて。以下のためにいくつかのあなたが以内であれば理由、MOBILE_KEYBOARD_HEIGHT（私の場合は250個のピクセル）メッセージのdivの下のピクセルモバイルキーボードを閉じると、奇妙な何かが起こります。前者のソリューションでは、一番下までスクロールします。後者のソリューションでは、代わりにMOBILE_KEYBOARD_HEIGHTピクセルを下から上にスクロールします。 この高さより上にスクロールすると、上に提供された両方のソリューションが問題なく機能します。彼らがこの小さな問題を抱えているのは、あなたが底辺りにいるときだけです。 多分それは私のプログラムがこれを引き起こしているいくつかの奇妙な迷子のコードだと思っていましたが、いいえ、私はフィドルを再現しさえしており、それはまさにこの問題を抱えています。これをデバッグするのが非常に困難になったことをお詫びしますが、電話でhttps://jsfiddle.net/t596hy8d/6/show（ショーのサフィックスは全画面モードを提供します）にアクセスすると、同じ動作。 その動作は、十分に上にスクロールすると、キーボードの開閉によって位置が維持されます。ただし、下部のピクセル内でキーボードを閉じると、MOBILE_KEYBOARD_HEIGHT代わりに下部にスクロールすることがわかります。 これは何が原因ですか？ ここでのコードの再現： window.onload = function(e){ document.querySelector(".messages").scrollTop = 10000; bottomScroller(document.querySelector(".messages")); } function bottomScroller(scroller) { let scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight; scroller.addEventListener('scroll', () => { scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight; }); window.addEventListener('resize', () => { scroller.scrollTop = scroller.scrollHeight - scrollBottom - …

10 javascript  android  html  css  reactjs 

私は、Firebase Authenticationモデルによって作成された属性とマージされた、ユーザーコレクションに格納されている属性であるユーザー名を取得する方法を理解しようとしています。 authUserにアクセスできます。これにより、firebaseが認証ツールで収集する限られたフィールドが表示され、そこから関連するユーザーコレクション（同じuidを使用）に移動しようとしています。 私は次のようなリアクションコンテキストコンシューマを持っています： import React from 'react'; const AuthUserContext = React.createContext(null); export default AuthUserContext; 次に、私のコンポーネントで使用しようとしています： const Test = () => ( <AuthUserContext.Consumer> {authUser => ( <div> {authUser.email} // I can access the attributes in the authentication collection {authUser.uid.user.name} //i cannot find a way to get the details in the …

10 reactjs  firebase  google-cloud-firestore  firebase-authentication 

私はこの問題を回避しようと努力してきましたが、それに対する強力な答えは見つかりませんでした。useMutationフックを使用してログインミューテーションを実行しようとしています。 TLDR; オプションで渡されたonErrorとuseMutationによって私に与えられたエラーの違いは何ですか？ これが私のコードスニペットです const [login, { data, loading, error }] = useMutation(LOGIN_QUERY, { variables: { email, password }, onError(err) { console.log(err); }, }); サーバー側では、ログインに使用するプリセット/ハードコードされたメールを使用していますが、Apolloや他のクライアントを使用していません。このログイン変異のリゾルバーでは、メールが同じでない場合はエラーをスローします throw new Error('Invalid Email'); クライアント側（React）でこのエラーを処理したいと思います。しかし、私の懸念は、useMutationフックから返された「エラー」を使用し、この方法でエラーを表示しようとすると、 render() { ... {error && <div> Error occured </div>} ... } エラーはUIで更新されますが、すぐにReactに未処理の拒否（エラー）の画面が表示されます。Graphqlエラー：My-custom-error-message しかし、useMutate関数にオプションで渡されたonErrorを使用すると、この画面は表示されず、エラーに対して何でも実行できます。 オプションで渡されたonErrorとuseMutationによって与えられたエラーの違いは何なのか、そしてonErrorが使用されていないときにReactがエラー画面を表示する理由を知りたいのですが。 ありがとう！

10 reactjs  graphql  react-apollo  apollo-client 

ユーザーが私のウェブサイトでgoogleを使用してサインアップしようとすると、Googleは上記の3つのポップアップをユーザーに表示しますが、サインアップしようとすると同じポップアップが表示されません。私が見るのはこれだけです- これらの3つの個別のポップアップが、私のWebサイトからの大幅な離脱を引き起こしています。これらの3つの異なる権限ポップアップを削除するにはどうすればよいですか？ Googleログインボタンの詳細-React Googleログインの使用 <div className="manager-signup-container"> <div className="content">Join Peoplebox as a Manager to have productive 1:1s that drive actions.</div> <GoogleLogin className={`google-btn-${this.state.loginbtnStatus}`} clientId={GOOGLE_CLIENT_ID} buttonText="Sign up with Google" onSuccess={(response) => this.responseOauth(response, "google")} onFailure={this.responseGoogleFail} responseType="code" scope="profile email https://www.googleapis.com/auth/calendar.events https://www.googleapis.com/auth/calendar.readonly" accessType="offline" prompt="consent" disabled={this.state.loginDisabled} />

10 reactjs  google-calendar-api  google-signin  google-apps  google-login