«reactjs» etiketlenmiş sorular

Paylaşılabilir bir React bileşen kitaplığı oluşturuyorum. Kitaplık birçok bileşen içerir, ancak son kullanıcının sadece birkaçını kullanması gerekebilir. Kodu Webpack (veya Parsel veya Toplama) ile paketlediğinizde, tüm kodla birlikte tek bir dosya oluşturur . Performans nedenlerinden ötürü, gerçekte kullanılmadıkça tüm bu kodların tarayıcı tarafından indirilmesini istemiyorum. Bileşenleri bir araya getirmemem gerektiğini …

12 reactjs  npm  webpack  es6-modules  rollup 

Popup ( window.open) kullanarak React OAuth uygulamak ile ilgileniyorum . Örneğin: mysite.com - burası pop-up'ı açtığım yer. passport.mysite.com/oauth/authorize - aniden belirmek. Ana soru, window.open(popup) ve window.opener( nasıl bilindiği gibi, etki alanları arası güvenlik nedeniyle window.opener'ın boş olduğu için ) nasıl bağlantı oluşturulacağıdır , bu yüzden artık kullanamayız. ⇑ window.openerfarklı bir …

12 javascript  reactjs  oauth  popup  authorization 

AutocompleteGiriş etiketleri için bileşen kullanmak istiyorum . Ben daha sonra veritabanına kaydedebilirsiniz böylece etiketleri almak ve onları bir devlet kaydetmek için çalışıyorum. Tepki içinde sınıflar yerine fonksiyonları kullanıyorum. Ben denedim onChangeama sonuç alamadım. <div style={{ width: 500 }}> <Autocomplete multiple options={autoComplete} filterSelectedOptions getOptionLabel={option => option.tags} renderInput={params => (<TextField className={classes.input} {...params} …

12 reactjs  material-ui 

React Hooks bize useState seçeneğini veriyor ve her zaman Hooks ile Class-State karşılaştırmasını görüyorum. Peki ya Kancalar ve bazı düzenli değişkenler? Örneğin, function Foo() { let a = 0; a = 1; return <div>{a}</div>; } Hooks'u kullanmadım ve bana aynı sonuçları verecek: function Foo() { const [a, setA] = useState(0); …

12 javascript  node.js  reactjs  react-hooks 

Bu benim bileşenim onClickdiv rotasını değiştirmek için satır içi ok işlevini kullanıyorum ama performans açısından iyi bir yol olmadığını biliyorum 1. Satır içi ok işlevi changeRoute (routeName) { console.log(routeName) } render() { return ( <> <div onClick={() => this.changeRoute("page1")}>1</div> <div onClick={() => this.changeRoute("page2")}>2</div> </> ) } 2. Eğer yapıcı bağlama …

11 javascript  reactjs 

Uyarı bileşenini kullanıcı olarak kullanmak için material-ui / lab yükledim, ancak her içe import Alert from '@material-ui/lab/Alert';aktardığımda: derleyemedi ve bu hatayı atıyor: ./node_modules/@material-ui/lab/esm/internal/svg-icons/SuccessOutlined.js Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'. Bu yüzden bu sorunu google'da denedim ve material-ui/lab/AutoCompletebileşenle ilgili başka bir soru buldum ( Bu soru tam olarak …

11 javascript  node.js  reactjs  material-ui 

Projemi tarayıcıda çalıştırdığımda aşağıdaki hatayı aldım: Derlenemedi: ./node_modules/@material-ui/lab/esm/internal/svg-icons/Close.js Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'. ("Birden çok değer" bölümündeki örnek) Otomatik Tamamlama bileşenini uygulamak çalışıyorum . İşte kullanıyorum kodu: import React from 'react'; import Chip from '@material-ui/core/Chip'; import Autocomplete from '@material-ui/lab/Autocomplete'; import TextField from '@material-ui/core/TextField'; <Autocomplete multiple id="tags-standard" …

11 reactjs  typescript  material-ui 

<If />React kullanarak basit bir işlev bileşeni yaptım : import React, { ReactElement } from "react"; interface Props { condition: boolean; comment?: any; } export function If(props: React.PropsWithChildren<Props>): ReactElement | null { if (props.condition) { return <>{props.children}</>; } return null; } Daha temiz bir kod yazmama izin veriyor, örneğin: render() …

11 javascript  reactjs  typescript 

TL; DR Bir üst bileşen, altındaki her alt bileşenin oluşturulmasının ne zaman tamamlandığını ve DOM'un en güncel sürümüyle kullanıcıya görünür olduğunu nasıl bilebilir? Diyelim ki component Abir alt Gridbileşeni olan bir bileşenim var3x3 torun bileşenlerinden bileşeni var. Bu torun bileşenlerinin her biri, dinlendirici bir API uç noktasından veri alır ve …

11 reactjs 

Adam bir sorunla karşı karşıyayım. 2 boyutlu verilerim var. Verilerin bağlantılar içeren iç içe bir yapısı vardır. const data = [ // First Div Panel [ { id: 1, url: "/services", title: "Services" }, { id: 2, title: "Products", children: [ { id: 3, url: "/themes-templates", title: "Themes & Templates" …

11 reactjs 

React tek sayfalık bir uygulama oluşturuyorum ve kaydırma geri yüklemesinin Chrome'da (ve belki de diğer tarayıcılarda) beklendiği gibi çalışmadığını fark ettim. Reat-router-dom github repo'da, tarayıcıların tek sayfa uygulamaları için kaydırmayı yerel olarak işlemeye başladığını ve davranışı history.scrollRestorationayarlanmışsa geleneksel bir SPA dışı web sayfasınınkine benzer olacağını belirten bir sayfası vardır . …

11 javascript  reactjs  google-chrome  react-router 

TypeScript, Jest, Webpack ve Babel kullanılarak oluşturulan bir React uygulaması (Create React App kullanmadan) var. "İplik jest" çalıştırmaya çalışırken, aşağıdaki hatayı alıyorum: Tüm paketleri kaldırmayı ve yeniden eklemeyi denedim. Bunu çözmez. Benzer sorulara ve belgelere baktım ve hala bir şeyleri yanlış anlıyorum. Şimdiye kadar bu ortamı sıfırdan ayarlamak için başka …

11 reactjs  jestjs  babeljs  babel-jest  ts-jest 

React-Redux ile hata işlemenin daha genel veya doğru yolunun ne olduğunu anlamak istiyorum. Varsayalım, telefon numarası kayıt bileşenim var. Bu Bileşen, girilen telefon numarasının geçersiz olup olmadığını söyleyen bir hata atar Bu hatayı ele almanın en iyi yolu ne olabilir? Fikir 1: Hata alan ve bir hata iletildiğinde bir eylem …

11 reactjs  redux 

Projemde bir Çekmece navigasyonu tasarlayacağım. Bu komutla yükledim: npm install @react-navigation/drawer Sonra bunu App.js import { createDrawerNavigator } from '@react-navigation/drawer'; import { NavigationContainer } from '@react-navigation/native'; Bu benim package.jsoniçeriğim: "@react-native-community/masked-view": "^0.1.6", "@react-navigation/drawer": "^5.0.0", "react": "16.9.0", "react-native": "0.61.5", "react-native-gesture-handler": "^1.5.6", "react-native-reanimated": "^1.7.0", "react-native-screens": "^2.0.0-beta.1", "react-native-view-shot": "^3.0.2", "react-navigation": "^4.1.1", "react-navigation-stack": "^2.1.0", Bu …

10 reactjs  react-native  navigation-drawer  react-navigation 

useEffectKancayı derinlemesine anlamaya çalışıyorum . Hangi yöntemi ne zaman ve neden kullanacağımı bilmek istiyorum? 1.useEffect with no second paraments useEffect(()=>{}) 2.useEffect with second paraments as [] useEffect(()=>{},[]) 3.useEffect with some arguments passed in the second parameter useEffect(()=>{},[arg])

10 javascript  reactjs  react-redux