คำถามติดแท็ก reactjs

ฉันได้ผ่านความหมายของทั้งสองชอบ: ฟังก์ชั่นที่บริสุทธิ์เป็นคนที่ไม่ได้พยายามที่จะเปลี่ยนอินพุตของพวกเขาและมักจะส่งกลับผลลัพธ์เดียวกันสำหรับอินพุทเดียวกัน ตัวอย่าง function sum(a, b) { return a + b; } และฟังก์ชั่น Impure เป็นสิ่งที่เปลี่ยนแปลงอินพุตของตัวเอง ตัวอย่าง function withdraw(account, amount) { account.total -= amount; } ความหมายและโค้ดนำมาจาก ReactJs เอกสารอย่างเป็นทางการ ตอนนี้ใครบางคนสามารถบอกฉันว่าฉันจะทำผิดพลาดในReact / Reduxเพื่อใช้ฟังก์ชั่นที่ไม่บริสุทธิ์ที่จำเป็นต้องใช้ฟังก์ชั่นบริสุทธิ์ได้อย่างไร

12 javascript  reactjs  redux 

ฉันกำลังสร้างไลบรารีคอมโพเนนต์ React ที่แชร์ได้ ไลบรารีมีส่วนประกอบมากมาย แต่ผู้ใช้อาจจำเป็นต้องใช้เพียงไม่กี่องค์ประกอบเท่านั้น เมื่อคุณรวมรหัสกับ Webpack (หรือพัสดุหรือ Rollup) มันจะสร้างไฟล์เดียวหนึ่งไฟล์ที่มีรหัสทั้งหมด ด้วยเหตุผลด้านประสิทธิภาพฉันไม่ต้องการให้เบราว์เซอร์ดาวน์โหลดรหัสทั้งหมดเว้นแต่จะใช้งานจริง ฉันคิดถูกหรือไม่ว่าไม่ควรรวมส่วนประกอบต่างๆ การรวมกลุ่มจะถูกทิ้งไว้กับผู้บริโภคของส่วนประกอบหรือไม่ ฉันจะปล่อยให้สิ่งอื่นใดกับผู้บริโภคส่วนประกอบหรือไม่ ฉันเพิ่งจะส่งผ่าน JSX และมันได้หรือไม่ หาก repo เดียวกันมีส่วนประกอบต่าง ๆ มากมายสิ่งที่ควรอยู่ใน main.js?

12 reactjs  npm  webpack  es6-modules  rollup 

ฉันสนใจที่จะใช้ OAuth ใน React โดยใช้ป๊อปอัพ ( window.open) เช่นฉันมี: mysite.com - นี่คือที่ฉันเปิดป๊อปอัพ passport.mysite.com/oauth/authorize - ป๊อปอัพ. คำถามหลักคือวิธีการสร้างการเชื่อมต่อระหว่างwindow.open(ป๊อปอัพ) และwindow.opener(เนื่องจากเป็นที่รู้จักกันว่า window.opener นั้นเป็นโมฆะเนื่องจากความปลอดภัยข้ามโดเมนดังนั้นเราจึงไม่สามารถใช้งานได้อีกต่อไป) ⇑ window.openerจะถูกลบเมื่อใดก็ตามที่คุณนำทางไปยังโฮสต์อื่น (เพื่อเหตุผลด้านความปลอดภัย) ไม่มีวิธีแก้ไข ตัวเลือกเดียวควรทำการชำระเงินในเฟรมถ้าเป็นไปได้ เอกสารด้านบนต้องอยู่ในโฮสต์เดียวกัน โครงการ: การแก้ปัญหาที่เป็นไปได้: ตรวจสอบหน้าต่างที่เปิดใช้setIntervalอธิบายไว้ที่นี่ ใช้cross-storage (ไม่คุ้มค่ากับมัน) ดังนั้นวิธีที่ดีที่สุดที่แนะนำในปี 2019 คืออะไร? แรปเปอร์สำหรับทำปฏิกิริยา - https://github.com/Ramshackle-Jamathon/react-oauth-popup

12 javascript  reactjs  oauth  popup  authorization 

ฉันต้องการใช้Autocompleteส่วนประกอบสำหรับแท็กอินพุต ฉันพยายามรับแท็กและบันทึกในสถานะดังนั้นฉันสามารถบันทึกในฐานข้อมูลในภายหลัง ฉันใช้ฟังก์ชั่นแทนการเรียนในปฏิกิริยา ฉันลองด้วยonChangeแต่ไม่ได้ผลลัพธ์ใด ๆ <div style={{ width: 500 }}> <Autocomplete multiple options={autoComplete} filterSelectedOptions getOptionLabel={option => option.tags} renderInput={params => (<TextField className={classes.input} {...params} variant="outlined" placeholder="Favorites" margin="normal" fullWidth />)} />

12 reactjs  material-ui 

React Hooks ให้เราใช้ตัวเลือก State และฉันจะเห็นการเปรียบเทียบ Hooks กับ Class-State เสมอ แต่สิ่งที่เกี่ยวกับ hooks และตัวแปรปกติบางอย่าง? ตัวอย่างเช่น, function Foo() { let a = 0; a = 1; return <div>{a}</div>; } ฉันไม่ได้ใช้ Hooks และมันจะให้ผลลัพธ์เหมือนกับ: function Foo() { const [a, setA] = useState(0); if (a != 1) setA(1); // to avoid infinite-loop return <div>{a}</div>; } แล้วความแตกต่างคืออะไร? …

12 javascript  node.js  reactjs  react-hooks 

นี่คือองค์ประกอบของฉันฉันใช้ฟังก์ชั่นลูกศรแบบอินไลน์เพื่อเปลี่ยนเส้นทางonClickของ div แต่ฉันรู้ว่ามันไม่ได้เป็นวิธีที่ดีในแง่ของประสิทธิภาพ 1. ฟังก์ชั่นลูกศรแบบอินไลน์ changeRoute (routeName) { console.log(routeName) } render() { return ( <> <div onClick={() => this.changeRoute("page1")}>1</div> <div onClick={() => this.changeRoute("page2")}>2</div> </> ) } 2. ถ้าฉันใช้ตัวสร้างการเชื่อมโยงฉันจะส่งผ่านอุปกรณ์ประกอบฉากได้อย่างไร constructor() { super(props) this.changeRoute = this.changeRoute.bind(this) } changeRoute (routeName) { console.log(routeName) } render() { return ( <> <div onClick={this.changeRoute}>1</div> <div onClick={this.changeRoute}>2</div> </> …

11 javascript  reactjs 

ฉันได้ติดตั้ง material-ui / lab เพื่อให้ผู้ใช้ส่วนประกอบการแจ้งเตือน แต่เมื่อใดก็ตามที่ฉันนำเข้ามัน: import Alert from '@material-ui/lab/Alert';มันล้มเหลวในการรวบรวมและโยนข้อผิดพลาดนี้: ./node_modules/@material-ui/lab/esm/internal/svg-icons/SuccessOutlined.js Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'. ดังนั้นฉันจึงพยายาม google ปัญหานี้และพบคำถามอื่นเกี่ยวกับmaterial-ui/lab/AutoCompleteองค์ประกอบ ( คำถามนี้แน่นอน ) และคำตอบที่ยอมรับได้คือการอัปเดต material-ui / core เป็นรุ่น 4.9.9 และดูเหมือนว่ามันเหมาะสำหรับคนที่ถาม แต่น่าเสียดายที่ไม่ใช่สำหรับฉันฉันมีสิ่งต่าง ๆ ที่ติดตั้ง ui material -ui รุ่นนี้: "@material-ui/core": "^4.9.9", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.48", ดังนั้นตอนนี้ฉันกำลังถามพวกคุณว่ามีวิธีอื่นในการแก้ปัญหานี้หรือไม่ขอบคุณ

11 javascript  node.js  reactjs  material-ui 

ฉันได้รับข้อผิดพลาดต่อไปนี้เมื่อฉันรันโครงการบนเบราว์เซอร์: ไม่สามารถรวบรวม: ./node_modules/@material-ui/lab/esm/internal/svg-icons/Close.js Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'. ฉันกำลังพยายามใช้องค์ประกอบการเติมข้อความอัตโนมัติ (จากตัวอย่างในส่วน "ค่าหลายค่า") นี่คือรหัสที่ฉันใช้: 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" options={top100Films} getOptionLabel={(option) => option.title} defaultValue={[top100Films[13]]} renderInput={(params) => ( <TextField {...params} variant="standard" label="Multiple values" placeholder="Favorites" /> …

11 reactjs  typescript  material-ui 

ฉันสร้าง<If />ส่วนประกอบฟังก์ชันอย่างง่ายโดยใช้ React: 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; } มันช่วยให้ฉันเขียนรหัสทำความสะอาดเช่น: render() { ... <If condition={truthy}> presnet if truthy </If> ... ในกรณีส่วนใหญ่มันใช้งานได้ดี แต่เมื่อฉันต้องการตรวจสอบว่าตัวแปรที่กำหนดไม่ได้ถูกกำหนดและผ่านมันเป็นคุณสมบัติมันจะกลายเป็นปัญหา ฉันจะให้ตัวอย่าง: สมมติว่าฉันมีองค์ประกอบที่เรียกว่า<Animal …

11 javascript  reactjs  typescript 

TL; DR คอมโพเนนต์หลักจะทราบได้อย่างไรว่าการแสดงผลขององค์ประกอบย่อยทั้งหมดนั้นเสร็จสิ้นแล้วและผู้ใช้สามารถเห็น DOM รุ่นล่าสุดได้อย่างไร สมมติว่าผมมีcomponent Aที่มีเด็กGridองค์ประกอบประกอบด้วย3x3ส่วนประกอบหลาน ส่วนประกอบของหลานเหล่านั้นดึงข้อมูลจากจุดปลายทาง API ที่สงบและแสดงผลเมื่อข้อมูลพร้อมใช้งาน ฉันต้องการจะครอบคลุมพื้นที่ทั้งหมดของComponent Aด้วยloaderตัวยึดที่จะเปิดเผยเฉพาะเมื่อสุดท้ายของส่วนประกอบในตารางมีความจริงข้อมูลที่ประสบความสำเร็จและกลายเป็นมันดังกล่าวว่ามีอยู่แล้วใน DOM และสามารถดูได้ ประสบการณ์ของผู้ใช้ควรจะราบรื่นสุด ๆ จาก "ตัวโหลด" ไปเป็นกริดที่มีประชากรเต็มโดยไม่ต้องกะพริบ ปัญหาของฉันคือรู้ว่าเมื่อใดที่จะเปิดเผยส่วนประกอบภายใต้ตัวโหลด มีกลไกใดบ้างที่ฉันสามารถวางใจได้ในการทำสิ่งนี้อย่างแม่นยำ? ฉันจะไม่ จำกัด จำนวนครั้งในการโหลดของตัวโหลด เนื่องจากฉันเข้าใจว่าการพึ่งพาComponentDidMountสำหรับเด็กทุกคนนั้นไม่น่าเชื่อถือเพราะไม่ได้รับประกันว่าผู้ใช้จะเห็นส่วนประกอบทั้งหมดในเวลาที่โทร เพื่อกลั่นกรองคำถามให้ดียิ่งขึ้น: ฉันมีส่วนประกอบที่ทำให้ข้อมูลบางประเภท หลังจากที่เริ่มต้นมันไม่ได้ดังนั้นมันcomponentDidMountจึงเข้าสู่จุดสิ้นสุดของ API สำหรับมัน เมื่อได้รับข้อมูลก็จะเปลี่ยนสถานะของมันเพื่อสะท้อนให้เห็น สิ่งนี้ทำให้เกิดการแสดงผลสถานะสุดท้ายของส่วนประกอบนั้นอีกครั้งอย่างเข้าใจได้ คำถามของฉันคือ: ฉันจะรู้ได้อย่างไรว่าการแสดงผลซ้ำนั้นเกิดขึ้นและสะท้อนให้เห็นในผู้ใช้ที่หันหน้าไปทาง DOM จุดนั้นในเวลา! = จุดในเวลาที่สถานะขององค์ประกอบเปลี่ยนไปเป็นข้อมูล

11 reactjs 

Guy ฉันกำลังเผชิญปัญหาอยู่ ฉันมีข้อมูลสองมิติ ข้อมูลมีโครงสร้างแบบซ้อนที่มีลิงค์อยู่ const data = [ // First Div Panel [ { id: 1, url: "/services", title: "Services" }, { id: 2, title: "Products", children: [ { id: 3, url: "/themes-templates", title: "Themes & Templates" }, { id: 4, url: "/open-source", title: "Open Source" }, { id: 5, …

11 reactjs 

ฉันกำลังสร้างแอปพลิเคชันหน้าเดียว React และฉันสังเกตว่าการคืนค่าการเลื่อนไม่ทำงานตามที่คาดไว้ใน Chrome (และเบราว์เซอร์อื่น ๆ ) ใน react-dom-gomub repo พวกเขามีหน้าเว็บที่บอกว่าเบราว์เซอร์เริ่มต้นจัดการการเลื่อนสำหรับแอพหน้าเดียวและพฤติกรรมจะคล้ายกับหน้าเว็บที่ไม่ใช่สปาแบบดั้งเดิมหากhistory.scrollRestorationตั้งค่าเป็นauto. พฤติกรรมที่ฉันต้องการมีการระบุไว้ในหน้านั้น: เลื่อนขึ้นบนการนำทางเพื่อไม่ให้หน้าจอใหม่เลื่อนไปที่ด้านล่าง การคืนค่าตำแหน่งเลื่อนของหน้าต่างและองค์ประกอบที่เกินจากการคลิก "ย้อนกลับ" และ "ส่งต่อ" (แต่ไม่ใช่การคลิกลิงก์!) แต่ฉันต้องปิดการทำงานของเส้นทางที่มีแท็บหรือม้าหมุนด้วย นี่คือลิงค์ไปยังข้อมูลจำเพาะของ Chrome ในเรื่องนี้ สิ่งที่ฉันสังเกตใน Chrome เวอร์ชัน 78.0.3904.97 (รุ่นเป็นทางการ) (64 บิต) สำหรับ OS X คือสิ่งที่ฉันคาดหวังจากการhistory.scrollRestoration manualตั้งค่า นั่นคือเมื่อฉันเลื่อนหน้าเว็บลงครึ่งหนึ่งและฉันคลิกลิงก์หน้าถัดไปจะเลื่อนลงครึ่งหนึ่งของหน้าไปยังจุดเดียวกับหน้าก่อนหน้า ฉันได้ตรวจสอบhistory.scrollRestorationจุดต่าง ๆ แล้วพบว่ามันเริ่มต้นและคงอยู่autoเป็นค่าเริ่มต้น จุดสำคัญอย่างหนึ่งของที่นี่คือจากคำตอบของ @ TrevorRobinson "ความพยายามอัตโนมัติของเบราว์เซอร์ในการเรียกคืนการเลื่อน ... ... ส่วนใหญ่ไม่ทำงานสำหรับแอปหน้าเดียว ... " ตกลง ... ฉันพบการสนับสนุนที่สอดคล้องกันhistory.scrollRestorationแต่ …

11 javascript  reactjs  google-chrome  react-router 

ฉันมีแอปพลิเคชัน React (ไม่ได้ใช้สร้างแอป React) ที่สร้างโดยใช้ TypeScript, Jest, Webpack และ Babel เมื่อพยายามเรียกใช้ "yarn jest" ฉันได้รับข้อผิดพลาดต่อไปนี้: ฉันได้ลองลบแพ็กเกจทั้งหมดและเพิ่มใหม่อีกครั้ง มันไม่ได้แก้ปัญหานี้ ฉันได้ดูคำถามและเอกสารประกอบที่คล้ายกันและยังคงมีความเข้าใจผิดอยู่บ้าง ฉันไปจนถึงทำตามคำแนะนำอื่นสำหรับการตั้งค่าสภาพแวดล้อมนี้ตั้งแต่เริ่มต้นและยังได้รับปัญหานี้ด้วยรหัสของฉัน การพึ่งพารวมถึง ... "dependencies": { "@babel/plugin-transform-runtime": "^7.6.2", "@babel/polyfill": "^7.6.0", "babel-jest": "^24.9.0", "react": "^16.8.6", "react-dom": "^16.8.6", "react-test-renderer": "^16.11.0", "source-map-loader": "^0.2.4" }, "devDependencies": { "@babel/core": "^7.6.0", "@babel/preset-env": "^7.6.0", "@babel/preset-react": "^7.0.0", "@types/enzyme": "^3.9.2", "@types/enzyme-adapter-react-16": "^1.0.5", "@types/jest": …

11 reactjs  jestjs  babeljs  babel-jest  ts-jest 

ฉันต้องการที่จะเข้าใจว่าการจัดการข้อผิดพลาดทั่วไปหรือวิธีที่ถูกต้องมากขึ้นด้วย React-Redux คืออะไร สมมติว่าฉันมีองค์ประกอบการลงทะเบียนหมายเลขโทรศัพท์ องค์ประกอบนั้นแจ้งว่าเกิดข้อผิดพลาดหากหมายเลขโทรศัพท์ที่ป้อนไม่ถูกต้อง อะไรจะเป็นวิธีที่ดีที่สุดในการจัดการกับข้อผิดพลาดนั้น? ความคิดที่ 1: สร้างองค์ประกอบซึ่งรับข้อผิดพลาดและยื้อการกระทำเมื่อใดก็ตามที่มีการส่งข้อผิดพลาดไป ความคิดที่ 2: เนื่องจากข้อผิดพลาดเกี่ยวข้องกับส่วนประกอบนั้นส่งผ่านข้อผิดพลาดนั้นไปยังองค์ประกอบ (ซึ่งไม่ได้เชื่อมต่อกับ redux เช่นองค์ประกอบตัวจัดการข้อผิดพลาดจะไม่ส่งการกระทำ) คำถาม:มีคนแนะนำฉันเกี่ยวกับวิธีการจัดการข้อผิดพลาดใน React-Redux สำหรับแอปขนาดใหญ่ได้หรือไม่?

11 reactjs  redux 

ฉันจะออกแบบการนำทางลิ้นชักในโครงการของฉัน ฉันติดตั้งโดยคำสั่งนี้: npm install @react-navigation/drawer จากนั้นนำเข้าที่เข้ามา App.js import { createDrawerNavigator } from '@react-navigation/drawer'; import { NavigationContainer } from '@react-navigation/native'; นี่คือpackage.jsonเนื้อหาของฉัน: "@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", นี่คือApp.jsเนื้อหาของฉัน: const App = () => { const Drawer = …

10 reactjs  react-native  navigation-drawer  react-navigation