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

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 

ユーザーによってカートに追加された製品が一覧表示されているカートページが表示されたままになっています。2つのアレイがあります。1つは製品の詳細です。 productDetails: [ { productID: 1, productTitle: 'Product Title 1', productPrice: 2000 }, { productID: 2, productTitle: 'Product Title 2', productPrice: 5000 }, { productID: 3, productTitle: 'Product Title 3', productPrice: 1000 }, { productID: 4, productTitle: 'Product Title 4', productPrice: 10000 } ], ユーザーのみが選択したproductIDと数量を持つカート製品の詳細を含む別の製品。 cartProducts: [ { productID: 1, …

9 javascript  arrays  dictionary  filter 

マーカーに問題があります。プログレスバーの任意の場所をマークできるようにマーカーを伸縮可能にしたい 下のGIFに示すように 質問：プログレスバーの任意のポイントを選択し、マーカーをストレッチできるようにしたいのですが、マーカーを複数のポイントにすることができます。 以下のコードでそれを行う方法がわかりません： var player = videojs('demo'); player.markers({ markerStyle: { 'width':'9px', 'border-radius': '40%', 'background-color': 'orange' }, markerTip:{ display: true, text: function(marker) { return "I am a marker tip: "+ marker.text; } }, breakOverlay:{ display: true, displayTime: 4, style:{ 'width':'100%', 'height': '30%', 'background-color': 'rgba(10,10,10,0.6)', 'color': 'white', 'font-size': '16px' }, text: …

9 javascript  jquery  html  video.js 

エミュレーターを実行したまま、react-native run-androidを実行すると、常にこのエラーが発生します。反応ネイティブのrun-iosは完全に正常に動作します。 Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081 :ReactNative:Failed to parse React Native CLI configuration: groovy.json.JsonException: Unable to determine the current character, it is not a string, number, array, or object The current character read is 'E' with an int value of 69 Unable to determine the current character, it …

9 javascript  java  android  node.js  react-native 

私はPascalCase文字列を分割するtypescriptでパイプを作ろうとしていましたが、これも数字で分割するのが良いでしょう。また、連続した大文字で分割してほしい。私はこのパイプを使用していますが、Chromeでのみ機能し、Firefoxでは機能しませんが、明らかにChromeのみがルックバックをサポートしています。振り返ることなくこれを実現するにはどうすればよいですか？ transform(value: string): string { let extracted = ''; if (!value) { return extracted; } const regExSplit = value .split(new RegExp('(?<=[a-z])(?=[A-Z])|(?<=[A-Z])(?=[A-Z][a-z])|(?<=[0-9])(?=[A-Z][a-z])|(?<=[a-zA-Z])(?=[0-9])')); for (let i = 0; i < regExSplit.length; i++) { if (i !== regExSplit.length - 1) { extracted += `${regExSplit[i]} `; } else { extracted += regExSplit[i]; } } …

9 javascript  regex  typescript 

（Chartjs-tsgauge）に基づくゲージチャートを使用しています。ゲージの制限とは別にチャートの背景色を設定したい。Charts.JSが背景をレンダリングする方法に問題があります。私が使用したプラグインには背景に関するコードがないためです。たとえば、制限付きのゲージがあります[0, 20, 40, 60, 80, 100]。[0-30]緑、[30-70]黄、[70-100]赤に設定したい。現在のコード：CodePEN これが私の現在のオプションです。 var ctx = document.getElementById("canvas").getContext("2d"); new Chart(ctx, { type: "tsgauge", data: { datasets: [{ backgroundColor: ["#0fdc63", "#fd9704", "#ff7143"], borderWidth: 0, gaugeData: { value: 7777, valueColor: "#ff7143" }, gaugeLimits: [0, 3000, 7000, 10000] }] }, options: { events: [], showMarkers: true } }); そして、これが背景色を設定するための私のアプローチです。 new …

9 javascript  html5-canvas  chart.js 

サイドバー/ナビゲーションコンテンツ（Bootstrapを使用）をデフォルトでデスクトップに表示（展開）し、デフォルトでモバイルで閉じ、アイコンをモバイルでのみ表示しようとすると、実際に問題が発生します。これを機能させることができないようです。 <nav class="menu menu-open" id="theMenu"> <div class="menu-wrap"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <i class="fa fa-bars menu-close d-lg-none" id="menu-toggle"></i> </button> <div id="menu-logo"> <img src="Final_Logo.png" width="210" height="214" alt=""> </div> <div id="navbarToggleExternalContent"> <ul id="main-menu"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Writing</a> <a href="#">Events</a> <a href="#">Speaking</a> <a href="#">Music</a> </ul> <ul id="social-icons"> …

9 javascript  html  css  bootstrap-4  responsive-design 

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

9 javascript  reactjs  progressive-web-apps 

私が持っているマークボタン UI上で、任意のユーザの選択が赤でマークされ、クリックします。ここでは問題ありません。私はこれを達成しますdocument.execCommand("insertHTML") しかし、古い選択のマーキングの共通部分である新しい選択が作成された場合、古い選択の赤いマーキングが消えるという追加の要件があります。 例として： 次の画像では、これとテストがマークされています。今、私が最初から彼のテスを選択し、マークをクリックすると、これの古いマーキングとテストが消え、交差があるため、彼のテスのみがマークされるはずです。 コード： const button = document.getElementById("button"); button.addEventListener('click', ()=>{ const s = window.getSelection(); const selectionStr = s.toString(); document.execCommand("insertHTML", false, `<span class="bg-red">${selectionStr}<span>`); }) .bg-red { background: red; } <div contenteditable="true"> this is testing this is testing this is testing </div> <button id="button">mark</button> コードスニペットを実行する結果を非表示スニペットを展開

9 javascript 

私が持っている生命維持の 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 

非推奨にcustom elements spec v0なった両方の仕様と最新の安定バージョンで動作する必要があるコンポーネントを構築する必要があります。custom elements spec v1 custom elements v0スペックを使用してコンポーネントをビルドすると、一部のアプリはスペックpolymer 2をpolymer 1使用していないアプリケーションで同様の問題が発生しますcustom elements v1。 私は、ポリフィルを変更するアプリケーションを制御できません。一部のアプリケーションは、ポリフィルを使用する必要があり、古い仕様をサポートしているものもあれば、新しいポリフィルを使用しているものもあります。 ポリフィルのバージョンに関係なく、両方の仕様を組み合わせてすべてのアプリケーションでカスタム要素を実行するための確実なソリューションを探しています。私はコンポーネントに任意のポリフィルまたはスニペットを追加して、どこでも実行できるようにすることができます。私の研究では、両方の仕様をサポートするライブラリやポリフィルは見つかりませんでした。 添付のコールバックについて、以下で説明するマッピングのような両方の仕様を組み合わせることができるアダプターを作成することを計画しています。この考えに関する入力は大歓迎です。 connectedCallback(){ this.attachedCallback(); } 私はstenciljsを使用しようとしましたが、それはカスタム要素仕様の最新バージョンでのみ機能します。以前の仕様で動作するように調整する方法はまだ見つかりません。 上記の状況に対するいくつかの実行可能な代替案と実行可能な解決策を提案してください。

9 javascript  html  web-component  polyfills  custom-element 

私が持っているサーバレス ラムダ私は火（呼び出し）したい機能、方法をそしてそれを忘れ この方法でやっています // myFunction1 const params = { FunctionName: "myLambdaPath-myFunction2", InvocationType: "Event", Payload: JSON.stringify(body), }; console.log('invoking lambda function2'); // Able to log this line lambda.invoke(params, function(err, data) { if (err) { console.error(err, err.stack); } else { console.log(data); } }); // my function2 handler myFunction2 = (event) => { console.log('does …

9 javascript  aws-lambda  serverless  aws-serverless  aws-lambda-edge 

基本パスを使用して新しいVueアプリを作成しました。アプリが別のVueアプリに埋め込まれているため、このアプリはrouter-view起動時にをレンダリングしません。このアプリが別のアプリに組み込まれる方法または理由について詳しく知りたい場合は、こちらをご覧ください。 VueアプリをメインVueアプリのコンテナーにマウントする この問題に対する私自身の答え： https://stackoverflow.com/a/58265830/9945420 アプリケーションを起動すると、以外のすべてがレンダリングされますrouter-view。起動時に指定のブラウザURLでリダイレクトしたい。これは私のルーター設定です： import Vue from 'vue'; import Router from 'vue-router'; import One from './views/One.vue'; import Two from './views/Two.vue'; Vue.use(Router); const router = new Router({ base: '/my-embedded-app/', mode: 'history', routes: [ { path: '/', component: One, }, { path: '/two', component: Two, }, ], }); router.replace(router.currentRoute.fullPath); export default …

9 javascript  vue.js  vuejs2  vue-router 

この質問に対する受け入れられた回答について詳しく説明したいます。 以下の最小限の光沢のあるアプリ（承認された回答から抽出）を次の機能で改善することを検討しています。 1）長方形とテキストラベルを描画します。ラベルはR（input$foo）、たとえばドロップダウンから取得されます。ラベルが画像の外側にあるエッジケースを回避するには、ラベルを長方形の内側に配置する必要があります。 2）別の色を使用するラベルに応じて、長方形とそのラベルにを 3）ユーザーが長方形内をダブルクリックして削除する機能。複数の一致（オーバーラップ、ネスト）の場合、最小面積の長方形を削除する必要があります。 1）のブラウニーポイント：ドロップダウンは、次のようにカーソルの横に表示されます（ここにコードを記述）。可能であれば、ドロップダウンリストはserver.Rから渡す必要があり、固定/ハードコーディングしないでください。その理由は、ユーザー入力によっては、別のドロップダウンが表示される可能性があるためです。たとえば、果物用c('banana','pineapple','grapefruit')に1つのドロップダウン、動物用に1つのドロップダウンc('raccoon','dog','cat')などがあります。 # JS and CSS modified from: https://stackoverflow.com/a/17409472/8099834 css <- " #canvas { width:2000px; height:2000px; border: 10px solid transparent; } .rectangle { border: 5px solid #FFFF00; position: absolute; } " js <- "function initDraw(canvas) { var mouse = { x: 0, y: 0, startX: 0, …

9 javascript  r  browser  shiny