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

ฉันลองทดสอบหน่วยฉันสร้าง sandbox พร้อมตัวอย่างปลอมhttps://codesandbox.io/s/wizardly-hooks-32w6l (ในความเป็นจริงฉันมีแบบฟอร์ม) class App extends React.Component { constructor(props) { super(props); this.state = { number: 0 }; } handleSubmit = (number1, number2) => { this.setState({ number: this.handleMultiply(number1, number2) }) } handleMultiply = (number1, number2) => { return number1 * number2 } render() { const { number } = this.state; …

9 javascript  reactjs  jestjs 

ฉันพยายามเปิดบันเดิล แต่เมื่อ Android ใช้งานมันจะแสดงข้อความถัดไป 2020-01-05 23: 15: 45.366 26210-26210 / com.note.principal W / .note.principa: การเข้าถึงฟิลด์ที่ซ่อน Landroid / ดู / ดู; -> mAccessibilityDelegate: Landroid / ดู / ดู $ AccessibilityDelegate; (นักออกแบบกลเบา, การสะท้อนแสง) 2020-01-05 23: 15: 45.470 26210-26242 / com.note.principal E / ReactNativeJS: การละเมิดที่คงที่: requireNativeComponent: "RNCSafeAreaView" ไม่พบใน UIManager This error is located …

9 javascript  android  reactjs  react-native  gradle 

ดังนั้นฉันกำลังค้นหาคำตอบสำหรับคำถามนี้และพบว่าขณะนำเข้า 'React' ไม่จำเป็นต้องอยู่ใน {} เนื่องจากเป็นการส่งออกเริ่มต้นและไม่ใช่การส่งออกที่ระบุชื่อดีถูกต้อง แต่ฉันก็เห็นด้วยเช่นกัน ในขณะที่การนำเข้าการส่งออกเริ่มต้นเราสามารถใช้ชื่อใด ๆ ในการนำเข้า แต่ในกรณีนี้เราสามารถใช้การนำเข้าด้านล่างเท่านั้น import React from 'react'; และไม่ import Somename from 'react';

9 javascript  reactjs 

ฉันมีแอปพลิเคชันที่ฉันใช้ Material UI และผู้ให้บริการธีม (โดยใช้ JSS) ตอนนี้ฉันได้รวมfullcalendar-react เอาไว้ซึ่งไม่ใช่ไลบรารี React ที่สมบูรณ์แบบจริงๆ - มันเป็นเพียง wrapper องค์ประกอบ React บาง ๆ รอบรหัส fullcalendar ดั้งเดิม กล่าวคือฉันไม่สามารถเข้าถึงสิ่งต่าง ๆ เช่นอุปกรณ์ประกอบฉากแสดงผลเพื่อควบคุมลักษณะขององค์ประกอบ อย่างไรก็ตามให้สิทธิ์การเข้าถึงองค์ประกอบ DOM โดยตรงผ่านการติดต่อกลับที่ถูกเรียกเมื่อสร้างการแสดงผล (เช่นเมธอด eventRender ) นี่คือตัวอย่างทดลองพื้นฐาน ตอนนี้สิ่งที่ฉันต้องการทำก็คือทำให้ส่วนประกอบปฏิทินแบบเต็ม (เช่นปุ่ม) แบ่งปันรูปลักษณ์และความรู้สึกเช่นเดียวกับส่วนที่เหลือของแอปพลิเคชันของฉัน วิธีหนึ่งในการทำเช่นนี้คือฉันสามารถแทนที่สไตล์ทั้งหมดด้วยตนเองโดยดูที่ชื่อคลาสที่ใช้และใช้สไตล์ตามนั้น หรือ - ฉันสามารถใช้ชุดรูปแบบ Bootstrap - ตามที่แนะนำในเอกสารประกอบ แต่ปัญหาของการแก้ปัญหาเหล่านี้ก็คือ: มันจะทำงานมาก ฉันจะมีปัญหาการซิงโครไนซ์ถ้าฉันทำการเปลี่ยนแปลงชุดรูปแบบ MUI ของฉันและลืมปรับปรุงชุดรูปแบบปฏิทินพวกเขาจะดูแตกต่างกัน สิ่งที่ฉันต้องการทำคือ: แปลงธีม MUI เป็นธีม Bootstrap …

9 css  reactjs  fullcalendar  jss 

ฉันมีชุดย่อยของ Markdown ขนาดเล็กมากพร้อมกับ html แบบกำหนดเองบางส่วนที่ฉันต้องการแยกวิเคราะห์เป็นส่วนประกอบของ React ตัวอย่างเช่นฉันต้องการเปลี่ยนสตริงต่อไปนี้: hello *asdf* *how* _are_ you !doing! today เป็นอาร์เรย์ต่อไปนี้: [ "hello ", <strong>asdf</strong>, " ", <strong>how</strong>, " ", <em>are</em>, " you ", <MyComponent onClick={this.action}>doing</MyComponent>, " today" ] จากนั้นส่งคืนจากฟังก์ชั่น React render (React จะสร้างอาเรย์อย่างเหมาะสมในรูปแบบ HTML) โดยทั่วไปฉันต้องการให้ผู้ใช้มีตัวเลือกในการใช้ชุด Markdown ที่ จำกัด เพื่อเปลี่ยนข้อความของพวกเขาให้เป็นองค์ประกอบที่มีสไตล์ (และในบางกรณีองค์ประกอบของตัวเอง!) มันไม่ฉลาดนักที่จะอันตราย SetInnerHTML และฉันไม่ต้องการพึ่งพาภายนอกเพราะมันหนักมากและฉันต้องการฟังก์ชั่นพื้นฐานมาก ตอนนี้ฉันกำลังทำอะไรแบบนี้ แต่มันเปราะบางมากและไม่สามารถใช้ได้กับทุกกรณี …

9 javascript  arrays  regex  reactjs  markdown 

ฉันต้องการให้ผู้ใช้สามารถเรียงลำดับรายการสิ่งที่ต้องทำ เมื่อผู้ใช้เลือกรายการจากเมนูแบบเลื่อนมันจะตั้งค่าsortKeyซึ่งจะสร้างรุ่นใหม่setSortedTodosและในทริกเกอร์เปิดและโทรuseEffectsetSortedTodos ด้านล่างนี้เป็นตัวอย่างการทำงานว่าฉันต้องการ แต่ eslint จะแจ้งให้ฉันเพื่อเพิ่มtodosไปยังuseEffectอาร์เรย์ dependancy และถ้าผมทำมันทำให้เกิดห่วงอนันต์ (ตามที่คุณคาดว่าจะได้) const [todos, setTodos] = useState([]); const [sortKey, setSortKey] = useState('title'); const setSortedTodos = useCallback((data) => { const cloned = data.slice(0); const sorted = cloned.sort((a, b) => { const v1 = a[sortKey].toLowerCase(); const v2 = b[sortKey].toLowerCase(); if (v1 < v2) { return …

9 javascript  reactjs  react-hooks  eslint 

ในปัญหา GitHub นี้ฉันเสนอการเปลี่ยนแปลงเป็นหลัก: x = useCallback( ... , []); ถึง: x = useRef( ... ).current; ทั้งสองเหมือนกัน แต่ด้วยuseRefReact ไม่ได้เปรียบเทียบการพึ่งพา ซึ่งการตอบกลับมาพร้อมกับคำถาม: เคยมีสถานการณ์ที่การใช้งานน้อยกว่าการพึ่งพา Memo หรือ useCallback จะเป็นตัวเลือกที่ดีกว่า useRef หรือไม่? ฉันไม่สามารถคิดได้ แต่ฉันอาจมองข้ามกรณีการใช้งานบางอย่าง ทุกคนสามารถคิดสถานการณ์เช่นนี้ได้ไหม

9 reactjs  react-functional-component 

ฉันกำลังสร้าง React JS web app ซึ่งในที่สุดจะถูกแปลงเป็น PWA เพื่อให้ผู้ใช้สามารถติดตั้งลงในอุปกรณ์มือถือของพวกเขา ตอนนี้ลูกค้าขอให้หาวิธีที่จะผลักดันแอพ PWA เหล่านี้ไปยัง apple store และ google store ดังนั้นคำถามของฉันคือว่าเรามีเครื่องมือสำหรับการแปลง Progessive Web Apps เป็นไฟล์ apk หรือ ipa หรือไม่เพื่อให้เราสามารถนำไปเก็บไว้ที่ apple store หรือ play store ฉัน googled เล็กน้อยและตอนนี้สับสนเพราะบางคนบอกว่าเป็นไปได้บางคนบอกว่าเป็นไปไม่ได้ใน Apple store ฉันเห็นเครื่องมือบางอย่างเช่น PWABuilder ด้วย แต่ฉันไม่แน่ใจว่าเครื่องมือตัวใดที่เหมาะกับการใช้และเราสามารถเผยแพร่แอพ PWA ไปยังแอพสโตร์และเพลย์สโตร์ได้หรือไม่ ความช่วยเหลือใด ๆ เกี่ยวกับเรื่องนี้จะขอบคุณมาก ขอบคุณ

9 javascript  reactjs  progressive-web-apps 

ฉันมีฟังก์ชั่นIIFEสำหรับรหัสห้องสมุดบางส่วนในแอปพลิเคชันรุ่นเก่าที่ต้องทำงานกับ IE10 + (ไม่มีการโหลดโมดูล ES6 เป็นต้น) อย่างไรก็ตามฉันเริ่มพัฒนาแอป React ที่จะใช้ ES6 และ TypeScript และฉันต้องการใช้รหัสที่ฉันมีอยู่แล้วโดยไม่ต้องทำซ้ำไฟล์ หลังจากการวิจัยเล็กน้อยฉันพบว่าฉันต้องการใช้รูปแบบ UMD เพื่อให้ไฟล์ไลบรารีเหล่านี้ทำงานได้ทั้ง<script src=*>การนำเข้าและอนุญาตให้แอป React นำเข้าผ่านการโหลดโมดูล ES6 ฉันมาด้วยการแปลงต่อไปนี้: var Utils = (function(){ var self = { MyFunction: function(){ console.log("MyFunction"); } }; return self; })(); ถึง (function (global, factory) { typeof exports === 'object' && typeof module !== …

9 javascript  reactjs  es6-modules  legacy  iife 

ฉันกำลังพยายามกำหนดค่าแอปพลิเคชัน react-redux ใหม่ของฉันเพื่อใช้คุณสมบัติใหม่ของ React-Redux เอกสารอย่างเป็นทางการกล่าวว่า React Redux เสนอชุด hook API เป็นทางเลือกแทนการเชื่อมต่อ () ส่วนประกอบการสั่งซื้อที่สูงขึ้น ฉันพยายามค้นหาบทความช่วยเหลือที่เกี่ยวข้องกับ Hooks API ด้วยตัวอย่างจริงบางส่วน แต่แอปปฏิกิริยาตอบสนองทั้งหมดกำลังใช้ฟังก์ชันเชื่อมต่อ เอกสารอย่างเป็นทางการยังแสดงตัวอย่างพื้นฐานมาก ฉันต้องการเปลี่ยนฟังก์ชั่นเชื่อมต่อในแอพของฉันด้วย useSelector (ให้บริการโดย Hooks API) นี่คือตัวอย่างโค้ดจากแอปพลิเคชันของฉัน //MessagesListContainer export default connect( // mapStateToProps (state:State) => ({ activeUser: getActiveUser(state), messages: getMessagesList(state), }) )(MessagesList) //Selectors export const getActiveUser = (state: State) => state.activeUser; export …

9 reactjs  typescript  redux  react-redux 

ฉันมีองค์ประกอบคอนเทนเนอร์ที่ถือองค์ประกอบอื่น ๆ ไม่กี่ แต่ขึ้นอยู่กับส่วนขนาดหน้าจอของพวกเขาจะถูกตัดออกอย่างลึกลับในส่วนต่างๆ คุณสามารถสังเกตพฤติกรรมในลิงค์แซนด์บ็อกซ์รหัสของฉันเมื่อหน้า HTML ถูกปรับความกว้าง (โดยการคลิกและลาก) ฉันจะมั่นใจได้อย่างไรว่ามีการสร้างการแสดงผลขอบเขตของภาชนะหลักเท่านั้นและองค์ประกอบย่อยจะไม่ส่งผลกระทบ https://codesandbox.io/s/focused-tree-ms4f2 import React from "react"; import styled from "styled-components"; const StyledTextBox = styled.div` height: 15vh; width: 30vw; display: flex; flex-direction: column; margin: 0 auto; border: 1px solid black; background-color: #fff; > * { box-sizing: border-box; } `; const InputBox = styled.span` …

9 javascript  css  reactjs 

ฉันได้ดำเนินการreact-pivottableแค่อยากรู้ว่ามีวิธีการแสดงชุดข้อมูลทั้งหมดในมุมมองตารางข้อมูล jQuery เช่นฉันมีคอลัมน์ไม่กี่ต้องการที่จะแสดงทั้งหมดในมุมมองตารางสำหรับข้อมูลต่อไปนี้ด้านล่าง [ 'SRN', 'MainSystemType', 'MagnetType', 'MagnetCoverType', 'MagnetRMMUType', 'MagnetHighOrderShimPowerSupply', 'GradientAmplifierType', 'GradientInterfaceType', 'GradientSwitchType', 'RFSystemB1FieldSystem', 'RFSystemFrontendInterface', 'CabinetsDasCabinet', 'ReconstructorAvailableMemory', 'ReconstructorNumberOfProcessors', 'AcquisitionSystemBulkBoardType', 'CabinetsCoolersCabinet', 'AcquisitionSystemType', 'PatientSupportPatientSupportType', 'PatientInterfaceMiscellaneousBoxType', 'PatientInterfacePPUType', 'PatientInterfaceType', 'PatientInterfaceAudioModule', 'PatientInterfaceAudioSwitchType', 'PatientSupportPowerSupplyUnit', 'RFAmpType', 'IOP_Firmware', 'RFP_Firmware' ], [ 108, 'WA15', 'WA_15T', 'Wide Aperture', 'MEU', 'NONE', '781', 'IGCIDNA', 'NONE', 'HIGH', 'TFINT', 'DACC', 65536, 1, 'NONE', 'LCC2B', …

9 jquery  reactjs  database  datatable  pivot-table