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

ฉันใช้ react native navigation (react-navigation) StackNavigator เริ่มต้นจากหน้าเข้าสู่ระบบตลอดวงจรชีวิตทั้งหมดของแอป ฉันไม่ต้องการมีตัวเลือกย้อนกลับกลับไปที่หน้าจอเข้าสู่ระบบ ไม่มีใครรู้ว่ามันซ่อนอยู่บนหน้าจอหลังหน้าจอล็อกอินได้อย่างไร? BTW ฉันซ่อนมันไว้ในหน้าจอเข้าสู่ระบบโดยใช้: const MainStack = StackNavigator({ Login: { screen: Login, navigationOptions: { title: "Login", header: { visible: false, }, }, }, // ... other screens here })

87 reactjs  react-native  navigation  react-navigation 

ฉันกำลังจัดเก็บการอ้างอิงในร้านค้า redux ของฉันและใช้ mapStateToProps เพื่อแสดงการอ้างอิงสำหรับส่วนประกอบที่จำเป็นต้องเข้าถึง การอ้างอิงที่จัดเก็บมีลักษณะดังนี้: ref={node => this.myRefToBePutInReduxGlobalStore = node} propType ที่ถูกต้องสำหรับการอ้างอิงนี้คืออะไร?

87 reactjs 

ฉันมีหน้าเว็บที่ซับซ้อนโดยใช้ส่วนประกอบ React และกำลังพยายามแปลงหน้าจากเค้าโครงแบบคงที่เป็นเค้าโครงที่ตอบสนองและปรับขนาดได้มากขึ้น อย่างไรก็ตามฉันพบข้อ จำกัด ของ React อยู่เรื่อย ๆ และฉันสงสัยว่ามีรูปแบบมาตรฐานสำหรับจัดการปัญหาเหล่านี้หรือไม่ ในกรณีเฉพาะของฉันฉันมีส่วนประกอบที่แสดงผลเป็น div พร้อม display: table-cell และ width: auto น่าเสียดายที่ฉันไม่สามารถสืบค้นความกว้างขององค์ประกอบของฉันได้เนื่องจากคุณไม่สามารถคำนวณขนาดขององค์ประกอบได้เว้นแต่จะวางไว้ใน DOM (ซึ่งมีบริบททั้งหมดที่จะอนุมานความกว้างที่แสดงผลจริง) นอกเหนือจากการใช้สิ่งนี้สำหรับสิ่งต่างๆเช่นการวางตำแหน่งเมาส์แบบสัมพัทธ์แล้วฉันยังต้องการสิ่งนี้เพื่อตั้งค่าแอตทริบิวต์ความกว้างอย่างเหมาะสมในองค์ประกอบ SVG ภายในส่วนประกอบ นอกจากนี้เมื่อปรับขนาดหน้าต่างฉันจะสื่อสารการเปลี่ยนแปลงขนาดจากส่วนประกอบหนึ่งไปยังอีกส่วนหนึ่งในระหว่างการตั้งค่าได้อย่างไร เรากำลังทำการเรนเดอร์ SVG ของบุคคลที่สามทั้งหมดใน shouldComponentUpdate แต่คุณไม่สามารถตั้งค่าสถานะหรือคุณสมบัติของตัวคุณเองหรือส่วนประกอบย่อยอื่น ๆ ภายในวิธีการนั้นได้ มีวิธีมาตรฐานในการจัดการกับปัญหานี้โดยใช้ React หรือไม่?

86 javascript  reactjs  responsive 

setState(state, callback)ในการตอบสนองของรัฐไม่ได้มีการปรับปรุงทันทีดังนั้นเราจึงสามารถใช้โทรกลับใน แต่จะทำอย่างไรใน Redux? หลังจากโทรไปthis.props.dispatch(updateState(key, value))ฉันต้องทำอะไรบางอย่างกับสถานะที่อัปเดตทันที มีวิธีใดบ้างที่ฉันสามารถโทรกลับด้วยสถานะล่าสุดเหมือนกับสิ่งที่ฉันทำใน React

86 javascript  reactjs  redux 

ฉันอยู่ในขั้นตอนการใช้รายการที่กรองได้ด้วย React โครงสร้างของรายการดังที่แสดงในภาพด้านล่าง พรีเมี่ยม นี่คือคำอธิบายวิธีการทำงาน: สถานะอยู่ในองค์ประกอบระดับสูงสุดคือSearchองค์ประกอบ รัฐอธิบายดังนี้: { มองเห็นได้: บูลีน ไฟล์: อาร์เรย์ กรอง: อาร์เรย์ แบบสอบถาม: สตริง, currentSelectedIndex: จำนวนเต็ม } files เป็นอาร์เรย์ที่มีพา ธ ไฟล์ที่มีขนาดใหญ่มาก (10,000 รายการเป็นจำนวนที่น่าเชื่อถือ) filteredคืออาร์เรย์ที่กรองหลังจากผู้ใช้พิมพ์อย่างน้อย 2 อักขระ ฉันรู้ว่ามันเป็นข้อมูลอนุพันธ์และด้วยเหตุนี้จึงสามารถโต้แย้งเกี่ยวกับการจัดเก็บข้อมูลในสถานะได้ แต่จำเป็นสำหรับ currentlySelectedIndex ซึ่งเป็นดัชนีขององค์ประกอบที่เลือกในปัจจุบันจากรายการที่กรองแล้ว ผู้ใช้พิมพ์ตัวอักษรมากกว่า 2 ตัวลงในInputส่วนประกอบอาร์เรย์จะถูกกรองและสำหรับแต่ละรายการในอาร์เรย์ที่กรองResultองค์ประกอบจะถูกแสดงผล แต่ละResultองค์ประกอบจะแสดงเส้นทางแบบเต็มที่ตรงกับคำค้นหาบางส่วนและส่วนที่ตรงกันบางส่วนของเส้นทางจะถูกเน้น ตัวอย่างเช่น DOM ของคอมโพเนนต์ผลลัพธ์หากผู้ใช้พิมพ์ 'le' จะเป็นดังนี้: <li>this/is/a/fi<strong>le</strong>/path</li> หากผู้ใช้กดปุ่มขึ้นหรือลงในขณะที่Inputคอมโพเนนต์เน้นการcurrentlySelectedIndexเปลี่ยนแปลงตามfilteredอาร์เรย์ ทำให้Resultองค์ประกอบที่ตรงกับดัชนีถูกทำเครื่องหมายว่าเลือกไว้ทำให้เกิดการแสดงผลซ้ำ ปัญหา ตอนแรกฉันทดสอบสิ่งนี้ด้วยอาร์เรย์ที่เล็กพอfilesโดยใช้ React เวอร์ชันพัฒนาและทุกอย่างทำงานได้ดี ปัญหาเกิดขึ้นเมื่อฉันต้องจัดการกับfilesอาร์เรย์ที่ใหญ่ถึง 10,000 …

86 javascript  list  reactjs 

สถานะเริ่มต้นในแอป Redux สามารถตั้งค่าได้สองวิธี: ส่งต่อเป็นอาร์กิวเมนต์ที่สองไปยังcreateStore( ลิงก์เอกสาร ) ส่งต่อเป็นอาร์กิวเมนต์แรกไปยังตัวลด (ย่อย) ของคุณ ( ลิงก์เอกสาร ) หากคุณผ่านสถานะเริ่มต้นไปยังร้านค้าของคุณคุณจะอ่านสถานะนั้นจากร้านค้าได้อย่างไรและทำให้เป็นอาร์กิวเมนต์แรกในตัวลด

85 javascript  reactjs  redux 

เมื่อใดก็ตามที่ฉันวิ่งwebpackในเทอร์มินัลฉันจะได้รับ: Hash: efea76b1048c3a97b963 Version: webpack 1.12.13 Time: 33ms + 1 hidden modules ERROR in Cannot find module 'babel-core' นี่คือไฟล์webpack.config.jsของฉัน module.exports = { entry: './app-client.js', output: { filename: 'public/bundle.js' }, module: { loaders: [ { exclude: /(node_modules|app-server.js)/, loader: 'babel' } ] } } package.json { "name": "react", "version": "1.0.0", "description": "React …

84 javascript  express  reactjs  webpack  babeljs 

วิธีแก้ไขCould not find plugin "proposal-numeric-separator"ฉันได้รับข้อผิดพลาดนี้เมื่อฉันพยายามสร้างแอปพลิเคชัน React ฉันยังไม่ได้กดแอปพลิเคชัน: ./src/index.js Error: [BABEL] /home/pc/Downloads/project/src/index.js: Could not find plugin "proposal-numeric-separator". Ensure there is an entry in ./available-plugins.js for it. (While processing: "/home/pc/Downloads/project/node_modules/babel-preset-react-app/index.js$0") at Array.map (<anonymous>) at Generator.next (<anonymous>) at Generator.next (<anonymous>) error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about …

60 reactjs  build  yarnpkg 

หลังจากอัปเกรดเป็น 0.61 พื้นเมืองฉันได้รับคำเตือนมากมายดังนี้: VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead. อะไรคือสิ่งVirtualizedList-backed containerที่ฉันควรใช้และทำไมตอนนี้แนะนำให้ไม่ใช้เช่นนั้น?

38 javascript  reactjs  react-native 

วิธีมาตรฐานในการใช้ React useState Hook มีดังต่อไปนี้: const [count, setCount] = useState(0); อย่างไรก็ตามconst countตัวแปรนี้จะถูกกำหนดใหม่ให้เป็นค่าดั้งเดิมที่แตกต่างกันอย่างชัดเจน ทำไมตัวแปรไม่ได้ถูกกำหนดเป็นlet count?

33 javascript  reactjs  ecmascript-6  react-hooks 

นี่คือปัญหา: ฉันพยายามโทร 2 ฟังก์ชั่นเมื่อคลิกปุ่ม ฟังก์ชั่นทั้งสองอัพเดทสถานะ (ฉันใช้ useState hook) ฟังก์ชันแรกอัปเดตค่า 1 อย่างถูกต้องเป็น 'ใหม่ 1' แต่หลังจาก 1 วินาที (setTimeout) ฟังก์ชั่นที่สองเริ่มทำงานและจะเปลี่ยนค่า 2 เป็น 'ใหม่ 2' แต่! ได้ตั้งค่า value1 กลับไปที่ '1' ทำไมสิ่งนี้จึงเกิดขึ้น ขอบคุณล่วงหน้า! import React, { useState } from "react"; const Test = () => { const [state, setState] = useState({ value1: "1", value2: …

31 javascript  reactjs  react-hooks 

ฉันกำลังพัฒนาแอปพลิเคชั่นเริ่มระบบสปริงอย่างง่าย แต่เนื่องจากปัญหา GitHub ฉันสร้างไฟล์สตาร์ทแอปพลิเคชันใหม่โดยใช้ IntelliJ และติดตั้งโมดูลโหนดโดยใช้ข้อมูลการพึ่งพาไฟล์ของแอพพลิเคชั่นแพคเกจก่อนหน้า ถ้าฉันใช้แถบการนำทางที่ยุบ (แถบแฮมเบอร์เกอร์ -> navbars ตอบสนองซึ่งยุบในมุมมองอุปกรณ์เคลื่อนที่) และคลิกปุ่มแฮมเบอร์เกอร์เพื่อดูลิงก์ nav มันทำให้ฉันมีข้อผิดพลาดด้านล่าง แต่ทุกสิ่งเหล่านั้นเป็นไปด้วยดีในแอปพลิเคชันก่อนหน้า TypeError: Cannot convert object to primitive value HTMLDivElement.<anonymous> C:/Users/Hasindu/Documents/AF/Application Frameworks/online-fashion-store-master/src/main/js/src/collapse.js:346 343 | ...typeof config === 'object' && config ? config : {} 344 | } 345 | > 346 | if (!data && _config.toggle && …

27 javascript  jquery  reactjs  bootstrap-4 

ฉันกำลังพยายามหาวิธีใช้ผู้ฟัง Firebase เพื่อให้ข้อมูล firestore บนคลาวด์ได้รับการรีเฟรชด้วยการอัพเดต hooks ที่ตอบสนอง ตอนแรกฉันทำสิ่งนี้โดยใช้องค์ประกอบคลาสที่มีฟังก์ชั่น componentDidMount เพื่อรับข้อมูล firestore this.props.firebase.db .collection('users') // .doc(this.props.firebase.db.collection('users').doc(this.props.firebase.authUser.uid)) .doc(this.props.firebase.db.collection('users').doc(this.props.authUser.uid)) .get() .then(doc => { this.setState({ name: doc.data().name }); // loading: false, }); } สิ่งนี้จะหยุดลงเมื่อหน้าอัปเดตดังนั้นฉันจึงพยายามหาวิธีย้ายตัวฟังเพื่อโต้ตอบฮุก ฉันได้ติดตั้งreact-firebase-hooks แล้ว - แม้ว่าฉันไม่สามารถหาวิธีการอ่านคำแนะนำเพื่อให้สามารถใช้งานได้ ฉันมีองค์ประกอบฟังก์ชั่นดังนี้ import React, { useState, useEffect } from 'react'; import { useDocument } from 'react-firebase-hooks/firestore'; import …

27 javascript  reactjs  firebase  google-cloud-firestore  react-hooks 

ฉันกำลังปรับใช้แอป React แต่ได้รับข้อผิดพลาดแปลก ๆ เมื่อฉันเข้าชมหน้านี้ผ่าน https เมื่อฉันไปที่หน้ามากกว่า https ฉันได้รับข้อผิดพลาดต่อไปนี้: SecurityError: ล้มเหลวในการสร้าง 'WebSocket': การเชื่อมต่อ WebSocket ที่ไม่ปลอดภัยอาจไม่เริ่มต้นจากหน้าเว็บที่โหลดผ่าน HTTPS แต่เมื่อฉันไปที่หน้าผ่าน http มันทำงานได้อย่างสมบูรณ์ ปัญหาคือฉันไม่ได้ใช้ websockets เท่าที่ฉันจะบอกได้ ฉันค้นหารหัสเพื่อดูว่ามีคำขอ HTTP ที่ควรจะเป็น https หรือไปที่ ws: แทนที่จะเป็น wss: แต่ฉันไม่เห็นอะไรเลย มีใครเคยใช้มาก่อนหรือไม่ ฉันกำลังรวมสำเนาของไฟล์ package.json แจ้งให้เราทราบหากคุณต้องการให้ฉันอัปโหลดส่วนอื่น ๆ ของรหัสเพื่อช่วยในการแก้ปัญหา ขอบคุณล่วงหน้า. { "name": "client", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": …

25 node.js  reactjs 

บนreact-native init ProjectNameไฟล์แอพหลักApp.jsมีการประกาศของส่วนประกอบด้วยวิธีดังต่อไปนี้ const App: () => React$Node = () => {...} คำแนะนำนี้หมายความว่าอย่างไร ฉันหมายความว่าฉันใช้องค์ประกอบตามที่กำหนดไว้ดังนั้นฉันไม่เข้าใจโดยเฉพาะอย่างยิ่งการแสดงออกในระหว่างconst App = () => {...}: () => React$Node

23 javascript  reactjs  react-native