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

Markdownの非常に小さなサブセットと、Reactコンポーネントに解析したいカスタムHTMLがあります。たとえば、次の文字列を有効にしたいと思います。 hello *asdf* *how* _are_ you !doing! today 次の配列に： [ "hello ", <strong>asdf</strong>, " ", <strong>how</strong>, " ", <em>are</em>, " you ", <MyComponent onClick={this.action}>doing</MyComponent>, " today" ] そして、それをReactレンダー関数から返します（Reactは配列をフォーマット済みHTMLとして適切にレンダリングします） 基本的に、非常に限られたMarkdownのセットを使用して、テキストをスタイル付きコンポーネント（場合によっては自分のコンポーネント！）に変換するオプションをユーザーに提供したいと思います。 それは、dangerouslySetInnerHTMLには賢明ではなく、外部依存関係を持ち込みたくありません。これらはすべて非常に重いため、基本的な機能だけが必要なためです。 私は現在このようなことをしていますが、それは非常に壊れやすく、すべてのケースで機能するわけではありません。より良い方法があるかどうか私は思っていました： function matchStrong(result, i) { let match = result[i].match(/(^|[^\\])\*(.*)\*/); if (match) { result[i] = <strong key={"ms" + i}>{match[2]}</strong>; } return …

9 javascript  arrays  regex  reactjs  markdown 

ユーザーがToDoアイテムのリストを並べ替えられるようにしたい。ユーザーがドロップダウンリストから項目を選択すると、それが設定されますsortKeyの新しいバージョンを作成するであろうsetSortedTodos、とターントリガーでuseEffect、コールをsetSortedTodos。 以下の例は、私が望んでいるとおりに機能しますが、eslintは依存関係配列に追加todosするように求めています。そうするとuseEffect、無限ループが発生します（予想どおり）。 const [todos, setTodos] = useState([]); const [sortKey, setSortKey] = useState('title'); const setSortedTodos = useCallback((data) => { const cloned = data.slice(0); const sorted = cloned.sort((a, b) => { const v1 = a[sortKey].toLowerCase(); const v2 = b[sortKey].toLowerCase(); if (v1 < v2) { return -1; } if (v1 > v2) { …

9 javascript  reactjs  react-hooks  eslint 

このGitHubの問題では、基本的に変更を提案しました。 x = useCallback( ... , []); に： x = useRef( ... ).current; 2つは同じですが、useRefReactでは依存関係を比較しません。 回答が質問に付いてきました： 依存関係のないuseMemoまたはuseCallbackがuseRefよりも良い選択になる状況はありますか？ 考えられませんが、いくつかのユースケースを見落としていたかもしれません。 だから誰もがそのような状況を考えることができますか？

9 reactjs  react-functional-component 

ユーザーがモバイルデバイスにインストールできるように、最終的にPWAに変換されるReact JS Webアプリを作成しています。次に、クライアントは、これらのPWAアプリをアップルストアおよびグーグルストアにプッシュする方法を見つけるように求めます。したがって、私の質問は、Progessive Web Appsをapkまたはipaファイルとして変換して、アップルストアまたはプレイストアに配置できるツールがあるかどうかです。 私は少しグーグルしましたが、一部はそれが可能であると言う人もいれば、Appleストアでは不可能だと言う人もいるので、今は混乱しています。PWABuilderのようないくつかのツールも見ましたが、どれを使用するのが適切か、またPWAアプリをアプリストアとPlayストアに公開できるかどうかはわかりません。 これに関するどんな助けでも非常に感謝します。 ありがとう

9 javascript  reactjs  progressive-web-apps 

私が持っている生命維持の IE10 +（ノーES6モジュールのロードなど）のために働く必要があるとレガシー・アプリケーションのライブラリのコードの一部についての機能を。 しかし、私はES6とTypeScriptを使用するReactアプリの開発を開始しており、ファイルを複製せずに既存のコードを再利用したいと考えています。少し調べた結果、UMDパターンを使用して、これらのライブラリファイルを<script src=*>インポートとして機能させ、ReactアプリがES6モジュールの読み込みを介してインポートできるようにしたいと思いました。 私は次の変換を思いつきました： var Utils = (function(){ var self = { MyFunction: function(){ console.log("MyFunction"); } }; return self; })(); に (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : typeof define === 'function' && define.amd ? define(['exports'], factory) : (factory((global.Utils …

9 javascript  reactjs  es6-modules  legacy  iife 

コードの変更を反映するための0.61より前のバージョンのreact-nativeでは、次のような2つのオプションがあります。 ライブ再読み込み（変更を検出したときにアプリを再読み込みします） ホットリロード（リロードせずに変更を反映） しかし、バージョン0.61では、高速リフレッシュと呼ばれる新しい開発者向け機能が導入されており、ホットリロードと同様に機能する ため、問題は、高速リフレッシュとホットリロードの基本的な違いは何ですか。

9 reactjs  react-native  react-native-android  react-native-ios 

私のコードでは、を明示的に使用していませんがcomponentWillMount、実行中にいくつかの警告が表示されますwebpack。 react-dom.development.js：12386警告：componentWillMountは名前が変更されたため、使用をお勧めしません。詳細については、https：/fb.me/react-unsafe-component-lifecyclesを参照してください。 副作用のあるコードをcomponentDidMountに移動し、コンストラクターで初期状態を設定します。 非厳密モードでこの警告を抑制するには、componentWillMountの名前をUNSAFE_componentWillMountに変更します。React 17.xでは、UNSAFE_名のみが機能します。廃止されたすべてのライフサイクルの名前を新しい名前に変更するにnpx react-codemod rename-unsafe-lifecyclesは、プロジェクトのソースフォルダーで実行できます。 次のコンポーネントを更新してください：foo、bar 私は提案されたを実行しましたnpx react-codemod rename-unsafe-lifecyclesが、警告は消えませんでしたが、その表現を react-dom.development.js：12386警告：componentWillMountの名前が変更されたため、使用をお勧めしません。[...] ここでは、fooとbar私たちのチームが書いた両方のカスタムコンポーネント、および外部ライブラリのいくつかのコンポーネントがあります。Visual Studioソリューションを完全に検索しcomponentWillMountても結果は得られません。誰かが私に何が間違っていたのか説明してくれませんか？ 別の質問でコメントを読んだ で明示的な場所はありませんがcomponentWillMount、コンストラクターの後にコード行があります[...]コンストラクターstate={ tabindex:0 }に「移動」するにはどうすればよいですか？ 答えは書くこと constructor(props) {super(props); this.state = { tabindex:0 }}でした。誰かがここで何が起こっていたか説明できますか？コードではどのようなパターンを探す必要がありますか？ さらなる詳細 printWarning @ react-dom.development.js:12386 lowPriorityWarningWithoutStack @ react-dom.development.js:12407 ./node_modules/react-dom/cjs/react-dom.development.js.ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings @ react-dom.development.js:12577 flushRenderPhaseStrictModeWarningsInDEV @ react-dom.development.js:25641 commitRootImpl @ react-dom.development.js:24871 unstable_runWithPriority @ scheduler.development.js:815 runWithPriority$2 @ react-dom.development.js:12188 commitRoot @ …

9 javascript  reactjs  react-props 

create-react-appを使用して新しいプロジェクトを作成し、npm startを実行すると、これが表示されました。 https://imgur.com/a/3By9NCr FF 69.0.3の使用

9 reactjs 

npm startの実行中に次のエラーが表示されます。 ES2015モジュールの構文は、カスタムTypeScriptモジュールおよび名前空間@ typescript-eslint / no-namespaceよりも優先されます namespace InternalThings {...} 私はこれを研究しようとしましたが、それは非常に混乱しています。 なぜこれが起こっているのですか？それを修正するには？ tsconfig.jsonにいくつかのフラグを付けようとしましたが、これまでのところ成功していません。

9 javascript  node.js  reactjs  typescript 

ローカルマシンで反応アプリケーションを実行しようとしています。実行すると、次のエラーが発生します npm run start。 > node scripts/start.js internal/validators.js:125 throw new ERR_INVALID_ARG_TYPE(name, 'string', value); ^ TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined at validateString (internal/validators.js:125:11) at Object.resolve (path.js:161:7) at resolveApp (D:\Projects\react-app\react-site-master\config\paths.js:10:41) at Object.<anonymous> (D:\Projects\react-app\react-site-master\config\paths.js:73:13) at Module._compile (internal/modules/cjs/loader.js:776:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad …

9 reactjs 

ノードを再インストールしてappdata / roaming / npmとnpm-cacheを削除してみました。以前にいくつかのアプリを作成したことがあるので、何が起こっているのかわかりません。どんな助けでもありがたいです。

8 reactjs  create-react-app  npx 

私の問題を説明するビデオ：https : //i.imgur.com/L3laZLc.mp4 カードを2つの異なる行に追加できるシンプルなアプリがあります。カードが行に追加されるとreact-transition-group、「エンター」アニメーションをトリガーするために使用しています。 ただし、react-beautiful-dnd行間でカードをドラッグできるようにインストールし、行自体を並べ替えることもできます。ただし、カードが新しい行に移動されたとき、または行が並べ替えられたときに、一部のカードには「エンター」アニメーションが発生します。 ドラッグすると、次の場合に不要なアニメーションが起動します カードは別の行にドラッグされます。 行が再注文され、2つの行のカードの数が異なります。 奇妙なことに、不要なアニメーションは発生しません カードは、元の行内の新しい位置にドラッグされます。 行は並べ替えられ、行には同じ数のカードがあります。 を使用してを変更したreact-transition-groupときにアニメーションが起動しないようにする方法を知りたいのstateですがreact-beautiful-dnd。 私の問題のサンドボックス（App.jsファイル内のコメントの詳細）： https://codesandbox.io/s/get-beautiful-drag-to-not-trigger-transition-group-tc40w?fontsize=14&hidenavigation=1&theme=dark

8 css  reactjs  animation  react-transition-group  react-beautiful-dnd 

配列のinputリストがあり、配列のリストの入力を開始すると、に対応するフィルターが適用されますvalue。機能しinputますが、文字を入力した後、フォーカスが緩んでしまいます。 私のコード： const MyPage = (props) => { const [searchTerm, setSearchTerm] = useState(""); const results = !searchTerm ? people : people.filter(person => person.toLowerCase().includes(searchTerm.toLocaleLowerCase()) ); const handleChange = event => { setSearchTerm(event.target.value); }; const Desktop = ({ children }) => { const isDesktop = useMediaQuery({ minWidth: 992 }) return ( isDesktop? …

8 reactjs  react-native 

ネストされたメニューとサブメニューを作成していますが、すべてが今のところ完了しています。指定されたIDに基づいてデフォルトでこの折りたたみ可能なメニューを開くようにする必要があります。 以下の完全に機能するコードスニペットを確認することもできます。 const loadMenu = () => Promise.resolve([{id:"1",name:"One",children:[{id:"1.1",name:"One - one",children:[{id:"1.1.1",name:"One - one - one"},{id:"1.1.2",name:"One - one - two"},{id:"1.1.3",name:"One - one - three"}]}]},{id:"2",name:"Two",children:[{id:"2.1",name:"Two - one"}]},{id:"3",name:"Three",children:[{id:"3.1",name:"Three - one",children:[{id:"3.1.1",name:"Three - one - one",children:[{id:"3.1.1.1",name:"Three - one - one - one",children:[{id:"3.1.1.1.1",name:"Three - one - one - one - one"}]}]}]}]},{id:"4",name:"Four"},{id:"5",name:"Five",children:[{id:"5.1",name:"Five - one"},{id:"5.2",name:"Five - two"},{id:"5.3",name:"Five - three"},{id:"5.4",name:"Five …

8 javascript  html  reactjs  accordion  reactstrap 

私は現在React JSのドキュメントをフォローしていますが、エラー境界が期待どおりに機能しないという問題が発生しました。ドキュメントで提供されているCodePenに示されている例と、インターネットで見つけた他のいくつかの簡単な例を複製してみましたが、デモと同じように機能しておらず、苦労しています理由を理解する。 正確な問題は、BuggyCounterコンポーネントが余分にレンダリングされるため、エラーが2回スローされることです。コンポーネントが2度目にレンダリングされる理由がわかりません。 この最小限の例をご覧ください。 import React, { Component } from 'react'; function App() { return ( <ErrorHandler> <BuggyCounter /> </ErrorHandler> ); } class ErrorHandler extends Component { constructor(props) { super(props); this.state = { error: false, errorInfo: null } } componentDidCatch(error, errorInfo) { this.setState({ error, errorInfo }); } render() { console.log('rendering …

8 reactjs