探討React自訂元件中的條件渲染挑戰

我在我的React應用程式中的自訂元件中遇到了條件渲染的問題。我一直在努力創建一個用於條件渲染的自訂元件，只有在滿足特定條件時才渲染內容。以下是我目前的程式碼：importReactfrom'react';functionConditionalRenderComponent({condition,children}){return({condition&&children});}

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

更新由陣列渲染的前一個React元件的狀態的方法

我在點擊「新增元件」按鈕時，在陣列中新增了一個React元件，並渲染了該陣列。每個元件透過將其作為屬性傳遞給計數鉤子來進行渲染。問題在於，一旦元件被添加到數組並渲染出來，即使我透過按鈕增加計數，計數鉤子也會更新，但是從數組中渲染的元件不會更新。當我再次點擊「新增元件」按鈕時，新的元件將會以更新的鉤子渲染出來。但是之前的組件不會隨著增加而更新。 App.jsimportReact,{useState}

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

javascript - vue.js如何遞歸渲染元件.

我先是寫好了一個基礎元件，然後想在該元件中引入自己進行遞歸渲染，但引入後會報template or render function not defined的問題，求教大神該如何解決呢？

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

在沒有使用條件鉤子的情況下，在元件上呈現比之前渲染錯誤更多的鉤子

我有以下元件，可以呈現檔案上傳的可點擊連結import{gql,useLazyQuery,useMutation}from'@apollo/client';import{useEffect,useState}from'react';importtypeFileUploadfrom'@app/data/models/FileUpload ';import{ExternalLink}from'@app/

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

嘗試渲染多個元件時出現 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  522

為什麼我的 React 元件渲染了兩次？

我不知道為什麼我的React元件渲染了兩次。因此，我從params中提取電話號碼並將其保存到state中，以便我可以透過Firestore進行搜尋。一切似乎都工作正常，除了渲染兩次......第一次渲染電話號碼和零點。第二次渲染時所有資料都正確顯示。有人可以指導我解決方案嗎？ classUpdateextendsComponent{constructor(props){super(props);co

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

javascript - 請問關於React-Native中FlatList的惰性渲染是以item為單位還是以最小元件為單位？

FlatList會惰性渲染子元素，只在它們將要出現在螢幕中時開始渲染。那麼是以item為單位渲染還是以最小元件為單位？假設一個list有3個item，一個Item佔3屏，每個item包含10個組件第一個item的前3個在第一屏，那麼...

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

如何在erb視圖中使用Hyperstack元件進行渲染

例如，我有一個包含許多邏輯的erb頁面。我想使用Hyperstack在此頁面上建立使用者訊息。我如何在這個erb頁面上渲染Hyperstack元件？更新：我知道這是可能的，因為Hyperstack元件嵌入在application.erb中。

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

為什麼更改 Pinia 狀態（刪除數組中的物件）後不重新渲染 Vue 元件？

我有一個deleteHandler函數，它可以更改pinia中的使用者數組。但是，在vue的devtools中，狀態發生了更改，但組件沒有重新渲染，但是如果我從數組中刪除對象，只需更改一些值，然後vue會識別它並重新渲染組件，僅通過從數組中刪除對像是行不通的。 constdeleteHandler=(user)=>{//doesn'trendersuseUser.users=useUser.us

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

javascript - 自訂子元件接收到父元件數據，怎麼用v-for渲染多個子元件

先上程式碼 現在傳到子元件的是4個對象，怎麼用v-for渲染4個子元件，v-for是放在父元件的template還是放在子元件

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

javascript - vue2.0動態載入多個相同元件，給元件中的data輸入不同的值，關閉非最後一個元件時，銷毀的值是最後一個元件值。

vue2.0動態載入多個相同元件，給元件中的data輸入不同的值，關閉非最後一個元件時，銷毀的值是最後一個元件值。元件載入方式：component是一個陣列.透過自訂事件取得要渲染的元件，往component中push。 <com...

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

在react-router的<Route>中如何使用不同的props渲染相同的元件

我有一個News元件，它需要一些道具，每當我點擊<Link/>以及相應的類別道具時，我都想使其重新渲染。它會更新URL，但不會重新呈現元件。 <Routes><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"/><!-- doesn'twork--><CalendarDaysIcon/><!--works-->&

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都會被呼叫。命令是us

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

在 Vue 元件內結合 Vue 渲染 HTML

我正在嘗試將專案從Vue2升級到Vue3，其中有一個元件包含不同Vue元件的集合。它在Vue2中的工作方式是在Twig中呼叫Twig模板（例如：field.twig）並將其發送到Vue使用:is屬性和Vue.compile方法進行編譯（<div:is"compile(元素.內容） ....“）。這是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  619

javascript - react-router V4 元件嵌套

以前用react-router V2 版，路由嵌套這麼寫是沒問題的： 目的：訪問不同的path 都會載入Main_page 元件，根據不同的path 會在Main_page 元件裡分別渲染Abstract 或React_tutorial 等這些子元件， Main_pag. ..

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

標題重寫為：解決Vue.js 3和Tailwind CSS中RatingBar元件動態寬度渲染問題

我正在使用Vue.js3和TailwindCSS。我有一個名為RatingBar的元件，我試著將動態寬度值套用到父元素的class。然而，儘管我在DevTools中可以看到期望的寬度，但它渲染為100%。這是我在RatingBar.vue元件中的程式碼：<template><divclass="my-2gridgrid-cols-3items-center"&g

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

set***函數被呼叫但函數元件的重新渲染沒有執行

我的腳本如下所示，api取得專案後，我想重新渲染元件並使EnhancedTable出現。但這個腳本，apifetch成功，但沒有出現EnhancedTable。 response.data傳回正確的數據，但未執行重新渲染。我哪裡錯了？ constMetaPanel=(props)=>{const[drawingItems,setDrawingItems]=React.useState([])

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

儲存渲染的元件和狀態：如何在頁面重新載入時保留？

我正在開發一個儀表板應用程序，用戶可以自訂它以渲染他們選擇的組件。一旦他們配置好了，我該如何保存這個狀態，以便用戶重新訪問應用程式時，加載與他們離開時相同的設定？例如，我有以下可用的元件：A,B,C,D,E。使用者配置他們的儀表板只渲染A,C,D。我希望當使用者重新載入或重新造訪頁面時，渲染相同的元件（A,C,D）和它們各自的狀態。我不希望用戶每次都要重新配置應用程式。我考慮將資料儲存在文字檔案中，

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