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

私はVSコードでReactプロジェクトを書いています。この問題はVSコードで発生しました。私のプロジェクトでは、このフォルダーには強調表示されたアイテムが含まれていますが、ファイルにエラーがあることを意味します。しかし、写真では 、 すべてのファイルをチェックしましたが、エラーは見つかりませんでした。だからこれは私を混乱させます。 私はこの問題をグーグルで検索し、同様のgithubの問題を見つけました。https://github.com/Microsoft/vscode/issues/54960 誰かが私を助けてくれることを願っています。ありがとう

16 reactjs  visual-studio-code 

製品版でMERNアプリのLoginコンポーネントにアクセスしようとすると、次のタイプの一連のエラーがこの画像に表示されます。 私のアプリ（https://github.com/ahaq0/kumon_schedule）はローカルで完全に正常に動作し、今日のHerokuでホストされている完全に正常に動作していました。 今日行ったコードの変更をすべてロールバックして、役に立たなかった。同様に、package.json（および.lock）をチェックして、マテリアルUIの依存関係を変更したかどうかを確認しましたが、同じでした。ここでホストされているバージョンで突然動作しなくなった理由を理解できないようです。 エラーの行のコードは以下のとおりです。ただし、マテリアルUIの一部であるため、書きませんでした。 if (sheetManager.dynamicStyles) { var dynamicSheet = stylesOptions.jss.createStyleSheet(sheetManager.dynamicStyles, _extends({ link: true }, options)); dynamicSheet.update(props).attach(); state.dynamicSheet = dynamicSheet; state.classes = mergeClasses({ baseClasses: sheetManager.staticSheet.classes, newClasses: dynamicSheet.classes }); if (sheetsRegistry) { sheetsRegistry.add(dynamicSheet); } } else { state.classes = sheetManager.staticSheet.classes; } sheetManager.refs += 1; これは私の最初にデプロイしたアプリであり、物事をロールバックする最善の試みにもかかわらず、すべてが機能して機能しなくなったのに途方に暮れています。 編集。エラーログの送信元であるChromeだけでなく、Firefoxでもテストしたことを述べておきます。 ＃2を編集します。さらに多くのデバッグを行った後、Heroku経由でfccc55a5をコミットするようにロールバックするとエラーが発生しないことがわかりました。ただし、そのコミットで新しいブランチを作成し、そのブランチをデプロイしようとすると、機能しません。 こちらを ご覧くださいhttps://github.com/ahaq0/kumon_schedule/compare/fccc55a5...fccc55a5 Herokuの最後のビルドに戻すと、動作します。しかし、以前のコミットを新しいブランチにマージしてデプロイしようとしても、失敗します。

15 reactjs  typescript  heroku  material-ui  mern 

create-react-appで作成した反応アプリがあります。npm startを実行した後（開始スクリプトはpackage.jsonに "start"： "react-scripts start"として存在する）、コンソールは通常どおり開発サーバーを起動し、ブラウザーを起動します。しかし、この後、コンソールとブラウザはどちらも無期限に何もしません。エラーまたは出力はありません。それは単に何もしません。

15 reactjs  npm  create-react-app  react-scripts 

私は最近ExpoでTypeScriptを使い始めました。リンター/フォーマッターの統合をすべて行ったtypescript-eslintので、コーディング中にほとんどのエラーをキャッチできます。コードがコンパイルされるかどうかを確認するために、時々実行npx tscして修正します。 まだ十分に理解していないことの1つは、コンパイルエラーが多数ある場合でもアプリが正常にビルドされる理由です。アプリが正常にビルドされるのではなく、すべてのコンパイルエラーに対して赤い画面エラーが表示されることを期待（および好む）し、後で見つけます。例えば、 function square<T>(x: T): T { console.log(x.length); // error TS2339: Property 'length' does not exist on type 'T'. return x * x; } コンパイル時に簡単に確認できる典型的なTypeScriptエラーです（私はそう思いますか？）。大きな赤い画面エラーが発生し、ビルドが失敗するようにしたい。 私はTypeScriptを初めて使用するので、非常に重要なものが見当たらない可能性があります。この寛大さを正確に引き起こしているものは何ですか？より厳密なチェックを強制する方法はありますか？

15 reactjs  typescript  react-native  expo 

私は中に新たなんだNext.jsと私は、スタートページ（からリダイレクトする方法を思ったんだけど/へ）/ハローnextjs例えば。ユーザーがページをロードした後、パス=== / / hello-nextjsにリダイレクトするかどうかを決定します で反応し、ルータ、我々は次のように実行します。 <Switch> <Route path="/hello-nextjs" exact component={HelloNextjs} /> <Redirect to="/hello-nextjs" /> // or <Route path="/" exact render={() => <Redirect to="/hello-nextjs" />} /> </Switch>

15 html  reactjs  routing  react-router  next.js 

URLパラメータ（id）を取得し、それを使用してコンポーネントにさらにデータを入力する、react-router-domルートに基づいて詳細ビューをロードしようとしています。 私のルートは次のように/task/:idなり、次のようにURLから：idを取得しようとするまで、コンポーネントは正常にロードされます。 import React from "react"; import { useParams } from "react-router-dom"; class TaskDetail extends React.Component { componentDidMount() { let { id } = useParams(); this.fetchData(id); } fetchData = id => { // ... }; render() { return <div>Yo</div>; } } export default TaskDetail; これにより次のエラーが発生し、useParams（）を正しく実装する場所がわかりません。 Error: Invalid hook call. Hooks …

14 reactjs  react-router 

React.forwardRefは、react docsから、refを子機能コンポーネントに渡す認可された方法のように見えます。 const FancyButton = React.forwardRef((props, ref) => ( <button ref={ref} className="FancyButton"> {props.children} </button> )); // You can now get a ref directly to the DOM button: const ref = React.createRef(); <FancyButton ref={ref}>Click me!</FancyButton>; ただし、カスタムプロップを単に渡すよりも、これを行う利点は何ですか。 const FancyButton = ({ innerRef }) => ( <button ref={innerRef} className="FancyButton"> {props.children} </button> )); const …

13 javascript  reactjs  performance 

create-react-appドキュメントで指定されたコマンドを使用して新しいプロジェクトを作成しようとしnpx create-react-app my-appていますがpublic src、やなどのフォルダーが含まれていませんscript。

13 reactjs  create-react-app 

私は次のような2つの定義を通過しました： 純粋な関数とは、入力を変更しようとせず、常に同じ入力に対して同じ結果を返す関数です。 例 function sum(a, b) { return a + b; } そして不純関数はそれ自身の入力を変更するものです。 例 function withdraw(account, amount) { account.total -= amount; } ReactJの公式ドキュメントから取得した定義とコードスニペット。 純粋な関数が必要な場所で不純な関数を使用するために、React / Reduxでいくつかの間違いをする方法を教えてください。

12 javascript  reactjs  redux 

共有可能なReactコンポーネントライブラリを作成しています。 ライブラリには多くのコンポーネントが含まれていますが、エンドユーザーはそれらのいくつかを使用するだけで済みます。 コードをWebpack（またはParcelまたはRollup）にバンドルすると、すべてのコードを含む1つのファイルが作成されます。 パフォーマンス上の理由から、実際に使用されない限り、すべてのコードをブラウザでダウンロードしたくありません。コンポーネントをバンドルするべきではないと私は思いますか？バンドルはコンポーネントの消費者に任せるべきですか？コンポーネントの消費者に他に何かを残しますか？JSXをトランスパイルするだけですか？ 同じリポジトリに多数の異なるコンポーネントが含まれている場合、main.jsには何を含める必要がありますか？

12 reactjs  npm  webpack  es6-modules  rollup 

ポップアップ（window.open）を使用してReactにOAuthを実装する方法に興味があります。 たとえば、私は持っています： mysite.com —これがポップアップを開く場所です。 passport.mysite.com/oauth/authorize - 現れる。 主な質問は、window.open（ポップアップ）とwindow.opener（既知のように、クロスドメインセキュリティのためにwindow.openerがnullであるため、使用できないため）間の接続を作成する方法です。 ⇑ window.openerあなたは（セキュリティ上の理由のために）別のホストに移動したときに削除され、その周りに方法はありません。可能であれば、フレーム内で支払いを行うことが唯一のオプションです。最上位のドキュメントは同じホストにとどまる必要があります。 スキーム： 可能な解決策： ここでsetInterval説明されている方法を使用して、開いているウィンドウを確認します。 クロスストレージを使用する（それだけの価値はありません）。 では、2019年に推奨される最善のアプローチは何でしょうか？ Reactのラッパー-https ://github.com/Ramshackle-Jamathon/react-oauth-popup

12 javascript  reactjs  oauth  popup  authorization 

Autocomplete入力タグにコンポーネントを使用したい。タグを取得して状態に保存しようとしています。後でデータベースに保存できます。反応ではクラスの代わりに関数を使用しています。私はで試しましたがonChange、結果は得られませんでした。 <div style={{ width: 500 }}> <Autocomplete multiple options={autoComplete} filterSelectedOptions getOptionLabel={option => option.tags} renderInput={params => (<TextField className={classes.input} {...params} variant="outlined" placeholder="Favorites" margin="normal" fullWidth />)} />

12 reactjs  material-ui 

React HooksはuseStateオプションを提供し、私は常にHooksとClass-Stateの比較を見ます。しかし、フックといくつかの通常の変数はどうですか？ 例えば、 function Foo() { let a = 0; a = 1; return <div>{a}</div>; } 私はフックを使用しませんでした、そしてそれは私と同じ結果をもたらすでしょう： function Foo() { const [a, setA] = useState(0); if (a != 1) setA(1); // to avoid infinite-loop return <div>{a}</div>; } それで、違いは何ですか？その場合、フックの使用はさらに複雑になります...それで、なぜそれを使い始めるのですか？

12 javascript  node.js  reactjs  react-hooks 

これは私がインライン矢印機能を使用してonClickdiv のルートを変更している私のコンポーネントですが、パフォーマンスの点で良い方法ではないことを知っています 1.インライン矢印関数 changeRoute (routeName) { console.log(routeName) } render() { return ( <> <div onClick={() => this.changeRoute("page1")}>1</div> <div onClick={() => this.changeRoute("page2")}>2</div> </> ) } 2.コンストラクターバインディングを使用する場合、小道具をどのように渡すことができますか？ constructor() { super(props) this.changeRoute = this.changeRoute.bind(this) } changeRoute (routeName) { console.log(routeName) } render() { return ( <> <div onClick={this.changeRoute}>1</div> <div onClick={this.changeRoute}>2</div> </> ) } 3. …

11 javascript  reactjs 

アラートコンポーネントを使用するためにmaterial-ui / labをインストールしましたが、インポートすると次のimport Alert from '@material-ui/lab/Alert';ようになります。コンパイルに失敗し、このエラーがスローされます。 ./node_modules/@material-ui/lab/esm/internal/svg-icons/SuccessOutlined.js Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'. だから私はこの問題をグーグルで調べてmaterial-ui/lab/AutoCompleteコンポーネントに関する別の質問を見つけました（この質問とまったく同じです）、受け入れられた答えはmaterial-ui / coreをバージョン4.9.9に更新することでした、そしてそれは尋ねた人にとってはうまくいったようです、悲しいことに、私にとってはそうではありません。インストールされているすべてのmaterial-uiのこのバージョンがあります。 "@material-ui/core": "^4.9.9", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.48", だから今私はあなたにこの問題を解決する別の方法があるかどうかをみんなに尋ねています、ありがとう

11 javascript  node.js  reactjs  material-ui