React カスタム コンポーネントの条件付きレンダリングの課題を探る

React アプリケーションのカスタム コンポーネントでの条件付きレンダリングで問題が発生しています。私は、特定の条件が満たされた場合にのみコンテンツをレンダリングする条件付きレンダリング用のカスタム コンポーネントの作成に取り組んできました。これが私の現在のコードです: importReactfrom'react';functionConditionalRenderComponent({condition,children}){return({condition&&children});}

P粉301523298 2023-08-18 15:58:43 0  2  597

配列によってレンダリングされた以前の React コンポーネントの状態を更新するメソッド

React コンポーネントを配列に追加し、[コンポーネントの追加] ボタンをクリックしたときに配列をレンダリングしました。各コンポーネントは、プロパティとして count フックに渡すことによってレンダリングされます。問題は、コンポーネントが配列に追加されてレンダリングされると、ボタンを使用してカウントをインクリメントしても、カウントフックは更新されますが、配列からレンダリングされたコンポーネントは更新されないことです。 [コンポーネントの追加] ボタンをもう一度クリックすると、新しいコンポーネントが更新されたフックでレンダリングされます。ただし、以前のコンポーネントは追加されても更新されませ...

P粉014218124 2023-09-08 21:35:51 0  1  586

vue.js がコンポーネントを再帰的にレンダリングする方法。

最初に基本的なコンポーネントを書き、その後再帰レンダリング用のコンポーネントを導入しようと思ったのですが、導入後にテンプレートやレンダリング関数が定義されていないという問題が発生してしまうのですが、解決方法を教えていただけますか。

淡淡烟草味 2017-07-05 10:59:35 0  2  1359

条件付きフックを使用せずにコンポーネントで以前のレンダリング エラーを超えるレンダリングが発生する

ファイルアップロード用のクリック可能なリンクをレンダリングする次のコンポーネントがあります import{gql,useLazyQuery,useMutation}from'@apollo/client';import{useEffect,useState}from'react';importtypeFileUploadfrom'@app/data/models/FileUpload ';import{外部リンク}から'@app/

P粉331849987 2023-09-09 22:36:14 0  1  630

複数のコンポーネントをレンダリングしようとすると、React Native レンダリング エラーが発生します

ユーザーが「追加」ボタンを押した後に構築された同じカスタム コンポーネントの複数のコピーをレンダリングしたいと考えています。私のコードは次のとおりです: import"react-native-get-random-values";import{StyleSheet,TextInput,View,Text,TouchableHighlight,Button}from'react-native';importReact,{useState}from'rea

P粉043566314 2023-09-05 18:57:09 0  1  520

React コンポーネントが 2 回レンダリングされるのはなぜですか?

React コンポーネントが 2 回レンダリングされる理由がわかりません。そこで、params から電話番号を抽出して状態に保存し、Firestore 経由で検索できるようにします。電話番号とゼロ点が 2 回レンダリングされることを除いて、すべてが正常に動作しているようです。 2 回目のレンダリングではすべてのデータが正しく表示されます。誰か解決策を教えてくれませんか? classUpdateextendsComponent{constructor(props){super(props);co

P粉268654873 2023-10-16 12:47:00 0  1  734

javascript - React-Native での FlatList の遅延レンダリングは項目に基づいているのか、最小のコンポーネントに基づいているのか教えてください。

FlatList は子要素を遅延レンダリングし、画面に表示される直前にのみレンダリングを開始します。それでは、アイテム単位でレンダリングされるのでしょうか、それとも最小のコンポーネント単位でレンダリングされるのでしょうか?リストに 3 つの項目があり、1 つの項目が 3 つの画面を占有し、各項目に 10 個のコンポーネントが含まれ、最初の項目の最初の 3 つが最初の画面にあると仮定します。

滿天的星座 2017-05-31 10:37:53 0  1  788

erb ビューでハイパースタック コンポーネントを使用してレンダリングする方法

たとえば、多くのロジックを含む erb ページがあります。 Hyperstackを使用してこのページにユーザーメッセージを作成したいと考えています。この erb ページでハイパースタック コンポーネントをレンダリングするにはどうすればよいですか?更新: Hyperstack コンポーネントが application.erb に埋め込まれているため、これが可能であることはわかっています。

P粉301523298 2023-08-16 15:03:45 0  1  493

Pinia の状態を変更した (配列内のオブジェクトを削除した) 後、Vue コンポーネントが再レンダリングされないのはなぜですか?

pinia の users 配列を変更する deleteHandler 関数があります。ただし、vue の devtools では、状態は変更されますがコンポーネントは再レンダリングされませんが、配列からオブジェクトを削除すると、いくつかの値を変更するだけで、vue はそれを認識し、コンポーネントを再レンダリングします。配列オブジェクトは機能しません。 constdeleteHandler=(user)=>{//doesn'trendersuseUser.users=useUser.us

P粉763748806 2023-12-30 14:57:42 0  1  474

JavaScript - カスタム サブコンポーネントが親コンポーネント データを受け取る、v-for を使用して複数のサブコンポーネントをレンダリングする方法

コードから始めましょう。現在、子コンポーネントに 4 つのオブジェクトが渡されています。v-for を使用して 4 つの子コンポーネントをレンダリングするにはどうすればよいですか? v-for は親コンポーネントのテンプレートに配置する必要がありますか? それとも子コンポーネントに配置する必要がありますか?

PHP中文网 2017-05-19 10:44:00 0  1  654

javascript - vue2.0 は、複数の同一のコンポーネントを動的にロードし、コンポーネント内のデータに異なる値を入力し、最後ではないコンポーネントを閉じるときに、破棄された値が最後のコンポーネントの値になります。

Vue2.0 は複数の同一コンポーネントを動的にロードし、コンポーネント内のデータに異なる値を入力します。最後ではないコンポーネントを閉じるときに、破棄された値が最後のコンポーネントの値になります。コンポーネントのロード方法: コンポーネントは配列であり、カスタム イベントを通じてレンダリングするコンポーネントを取得し、コンポーネントにプッシュします。 <com...

黄舟 2017-07-05 11:00:36 0  1  1426

React-router の <Route> で異なる props を使用して同じコンポーネントをレンダリングする方法

いくつかの小道具を必要とするニュースコンポーネントがあり、<Link/> と対応するカテゴリの小道具をクリックするたびに再レンダリングしたいと考えています。 URL は更新されますが、コンポーネントは再レンダリングされません。 <ルート><​​Routepath="/"element={<Newscountry={this.country}apiKey={this.API_KEY}pageSize={this.pageSi

P粉002546490 2024-03-26 23:34:09 0  2  451

別のコンポーネント内で Vue コンポーネントを動的にレンダリングする

Vue3.2.41-@heroicons/vue2.0.14-inertiajs1.0-vite4.0.0 を使用して、これを使用して Vue コンポーネントを呼び出しています。 コンポーネントは次のようになります: <template><component:is="icon"/><! -- 動作しません --><CalendarDaysIcon/><!--動作します-->&

P粉764003519 2023-08-30 20:51:07 0  2  584

再レンダリングと useEffect() 呼び出しのシーケンス

TopPage コンポーネントと ImagePreview コンポーネント、および FileUploader に最初に FileUploader を表示させ、FileUploader が TopPage の fileObj 状態を変更します。次に、FileUploader が消え、ImagePreview が表示され、useEffect() が呼び出されますが、この時点では ImagePreviewRef はありません。 useState が呼び出されると、コンポーネントの再レンダリングと useEffect の両方が呼び出されます。指揮は我々だ

P粉722409996 2024-03-22 10:16:32 0  1  444

Vue コンポーネント内で Vue を結合して HTML をレンダリングする

プロジェクトを Vue2 から Vue3 にアップグレードしようとしています。そこには、さまざまな Vue コンポーネントのコレクションを含むコンポーネントがあります。 Vue2 での動作方法は、Twig で Twig テンプレート (例: field.twig) を呼び出し、:is 属性と Vue.compile メソッド (<div:is"compile(element.twig) を使用してコンパイルのために Vue に送信します。コンテンツ） ..."）。これは、Twig テンプレートが Vue に送信するものです。 しかし、Vue3 では、これはもう機能しな...

P粉193307465 2024-03-26 14:35:53 0  1  507

Vue スロット要素を使用したテンプレート ループでのレンダリング

スライドの HTML をコンポーネントに渡し、スロットを使用して別のコンポーネントにレンダリングしようとしています //carousel.blade.php <my-carousel><templatev-slot:slides><div>slide1</ div ><div>slide2</div></template></my-carousel

P粉514458863 2023-09-15 10:37:00 0  1  613

JavaScript - 反応ルーター V4 コンポーネントのネスト

以前は、react-router V2 バージョンを使用していましたが、次のようにルーティングのネストに問題はありませんでした: 目的: 異なるパスにアクセスすると、Main_page コンポーネントがロードされます。異なるパスに従って、Abstract や React_tutorial などのサブコンポーネントがレンダリングされます。 Main_page コンポーネント、Main_pag ..

代言 2017-06-26 10:50:06 0  2  893

タイトルは次のように書き換えられます: Vue.js 3 と Tailwind CSS の RatingBar コンポーネントの動的幅レンダリングの問題を解決する

Vue.js3 と TailwindCSS を使用しています。 RatingBar というコンポーネントがあり、親要素のクラスに動的な幅の値を適用しようとしています。ただし、DevTools では予想される幅が表示されますが、レンダリングは 100% です。これは RatingBar.vue コンポーネントのコードです: <template><divclass="my-2gridgrid-cols-3items-center"&g

P粉803527801 2023-09-01 10:19:15 0  1  425

set*** 関数が呼び出されますが、関数コンポーネントの再レンダリングは実行されません。

私のスクリプトは以下のようになります。API が項目を取得した後、コンポーネントを再レンダリングして、EnhancedTable を表示させたいと考えています。ただし、このスクリプトでは、apifetch は成功しますが、EnhancedTable は表示されません。 response.data は正しいデータを返しますが、再レンダリングは実行されません。どこで私は間違えましたか？ constMetaPanel=(props)=>{const[drawingItems,setDrawingItems]=React.useState([])

P粉864872812 2024-04-04 09:53:14 0  1  457

レンダリングされたコンポーネントと状態の保存: ページのリロード後も保持するにはどうすればよいですか?

私は、ユーザーがカスタマイズして選択したコンポーネントをレンダリングできるダッシュボード アプリケーションを開発しています。設定が完了したら、ユーザーがアプリケーションに再度アクセスしたときに、終了時と同じ設定が読み込まれるように、この状態を保存するにはどうすればよいですか?たとえば、次のコンポーネントが利用可能です: A、B、C、D、E。ユーザーは、A、C、D のみをレンダリングするようにダッシュボードを構成します。ユーザーがページをリロードまたは再訪問したときに、同じコンポーネント (A、C、D) とそれぞれの状態がレンダリングされるようにしたいと考えています。ユーザーが毎回アプリケーショ...

P粉052686710 2023-09-11 10:47:00 0  1  615