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

React (หรือเรียกอีกอย่างว่า React.js หรือ ReactJS) เป็นไลบรารี JavaScript ที่พัฒนาโดย Facebook เพื่อสร้างส่วนต่อประสานผู้ใช้ มันใช้กระบวนทัศน์ที่เปิดเผยส่วนประกอบตามและมีวัตถุประสงค์เพื่อให้ทั้งประสิทธิภาพและความยืดหยุ่น

4
React รักษาลำดับการอัปเดตสถานะหรือไม่
ฉันรู้ว่า React อาจทำการอัปเดตสถานะแบบอะซิงโครนัสและเป็นกลุ่มเพื่อเพิ่มประสิทธิภาพการทำงาน ดังนั้นคุณจึงไม่สามารถไว้วางใจสถานะที่จะอัปเดตได้หลังจากที่โทรsetStateไปแล้ว แต่คุณสามารถเชื่อถือได้ตอบสนองกับการอัปเดตของรัฐในการสั่งซื้อเช่นเดียวกับsetStateที่เรียกว่าสำหรับ ส่วนประกอบเดียวกัน? ส่วนประกอบต่าง ๆ ? พิจารณาคลิกปุ่มในตัวอย่างต่อไปนี้: 1.มีความเป็นไปได้หรือไม่ที่a เป็นเท็จและ b เป็นจริงสำหรับ: class Container extends React.Component { constructor(props) { super(props); this.state = { a: false, b: false }; } render() { return <Button onClick={this.handleClick}/> } handleClick = () => { this.setState({ a: true }); this.setState({ b: true }); …

10
วิธีบอก webpack dev server ให้บริการ index.html สำหรับเส้นทางใด ๆ
/arbitrary/routeตอบสนองเราเตอร์ช่วยให้ตอบสนองปพลิเคชันที่จะจับ เพื่อให้มันใช้งานได้ฉันต้องการเซิร์ฟเวอร์ของฉันเพื่อส่งแอป React ในทุกเส้นทางที่ตรงกัน แต่เซิร์ฟเวอร์ dev ของ webpackไม่จัดการจุดสิ้นสุดตามอำเภอใจ มีวิธีแก้ปัญหาที่นี่โดยใช้เซิร์ฟเวอร์ด่วนเพิ่มเติม วิธีการอนุญาตสำหรับ webpack-dev-server เพื่ออนุญาตจุดเข้าใช้งานจาก react-router แต่ฉันไม่ต้องการไฟเซิร์ฟเวอร์ด่วนอื่นให้อนุญาตการจับคู่เส้นทาง ฉันแค่อยากบอก webpack dev server ให้ตรงกับ url และส่งแอปตอบกลับของฉันมาให้ฉัน กรุณา.

5
ReactJS ชื่อองค์ประกอบจะต้องเริ่มต้นด้วยตัวอักษรพิมพ์ใหญ่?
ฉันกำลังเล่นรอบกับกรอบ ReactJS บนJSBin ฉันสังเกตว่าถ้าชื่อองค์ประกอบของฉันเริ่มต้นด้วยตัวอักษรตัวเล็กมันไม่ทำงาน ตัวอย่างเช่นสิ่งต่อไปนี้ไม่แสดงผล: var fml = React.createClass({ render: function () { return <a href='google.com'>Go</a> } }); React.render(<fml />, document.body); แต่ทันทีที่ฉันแทนที่fmlด้วยFmlมันจะทำให้ มีเหตุผลที่ฉันไม่สามารถเริ่มแท็กด้วยตัวอักษรขนาดเล็กได้หรือไม่?

8
การเก็บ jwt ใน localStorage ด้วย reactjs ปลอดภัยหรือไม่?
ฉันกำลังสร้างแอปพลิเคชันหน้าเดียวโดยใช้ reactjs ฉันอ่านว่าสาเหตุหลายประการที่ไม่ได้ใช้ localStorage เป็นเพราะช่องโหว่ XSS เนื่องจาก React หนีอินพุตทั้งหมดของผู้ใช้ตอนนี้จะปลอดภัยหรือไม่ที่จะใช้ localStorage

16
ใน reactJS จะคัดลอกข้อความไปยังคลิปบอร์ดได้อย่างไร?
ฉันใช้ ReactJS และเมื่อผู้ใช้คลิกลิงก์ฉันต้องการคัดลอกข้อความไปยังคลิปบอร์ด ฉันใช้ Chrome 52 และฉันไม่จำเป็นต้องสนับสนุนเบราว์เซอร์อื่น ๆ ฉันไม่เห็นสาเหตุที่รหัสนี้ไม่ส่งผลให้ข้อมูลถูกคัดลอกไปยังคลิปบอร์ด (ที่มาของข้อมูลโค้ดนั้นมาจากโพสต์ Reddit) ฉันทำสิ่งนี้ผิดหรือเปล่า? ใครสามารถแนะนำมีวิธี "ถูกต้อง" เพื่อใช้คัดลอกไปยังคลิปบอร์ดโดยใช้ reactjs? copyToClipboard = (text) => { console.log('text', text) var textField = document.createElement('textarea') textField.innerText = text document.body.appendChild(textField) textField.select() document.execCommand('copy') textField.remove() }

11
อินพุต typescript onchange event.target.value
ในแอป react และ typescript ของฉันฉันใช้: onChange={(e) => data.motto = (e.target as any).value}. ฉันจะทำอย่างไรได้อย่างถูกต้องกำหนด typings สำหรับการเรียนดังนั้นฉันจะได้ไม่ต้องตัดทางของฉันรอบระบบการพิมพ์ด้วยany? export interface InputProps extends React.HTMLProps<Input> { ... } export class Input extends React.Component<InputProps, {}> { } ถ้าฉันใส่target: { value: string };ฉันจะได้รับ: ERROR in [default] /react-onsenui.d.ts:87:18 Interface 'InputProps' incorrectly extends interface 'HTMLProps<Input>'. Types of property 'target' …

5
วิธีการวนซ้ำและแสดงองค์ประกอบใน React.js โดยไม่ต้องอาร์เรย์ของวัตถุที่จะทำแผนที่?
ฉันพยายามแปลงองค์ประกอบ jQuery เป็น React.js และสิ่งหนึ่งที่ฉันมีปัญหาคือการแสดงองค์ประกอบจำนวน n ตามการวนรอบ mapผมเข้าใจในเรื่องนี้เป็นไปไม่ได้หรือแนะนำและว่าที่อาร์เรย์ที่มีอยู่ในรูปแบบมันทำให้รู้สึกที่สมบูรณ์ในการใช้งาน ไม่เป็นไร แต่ถ้าคุณไม่มีอาเรย์ล่ะ? แต่คุณมีค่าตัวเลขซึ่งเท่ากับจำนวนองค์ประกอบที่กำหนดที่จะแสดงดังนั้นคุณควรทำอย่างไร นี่คือตัวอย่างของฉันฉันต้องการนำหน้าองค์ประกอบที่มีแท็ก span จำนวนเท่าใดก็ได้ตามระดับของลำดับชั้น ดังนั้นที่ระดับ 3 ฉันต้องการแท็ก 3 ส่วนต่อหน้าองค์ประกอบข้อความ ในจาวาสคริปต์: for (var i = 0; i < level; i++) { $el.append('<span class="indent"></span>'); } $el.append('Some text value'); ฉันไม่สามารถรับสิ่งนี้ได้หรือสิ่งใดที่คล้ายคลึงกับการทำงานในองค์ประกอบ JSX React.js แต่ฉันต้องทำสิ่งต่อไปนี้ก่อนอื่นให้สร้างอาร์เรย์ชั่วคราวตามความยาวที่ถูกต้องแล้ววนลูปอาร์เรย์ React.js render: function() { var tmp = []; for (var …

6
วิธีฟังการเปลี่ยนแปลงสถานะใน react.js อย่างไร
ฟังก์ชัน$ watchเชิงมุมของเทียบเท่าใน React.js คืออะไร ฉันต้องการฟังการเปลี่ยนแปลงสถานะและเรียกใช้ฟังก์ชันเช่น getSearchResults () componentDidMount: function() { this.getSearchResults(); }

8
จะทำให้ Django และ ReactJS ทำงานร่วมกันได้อย่างไร?
ใหม่สำหรับ Django และใหม่กว่าสำหรับ ReactJS ฉันมองหา AngularJS และ ReactJS แต่ตัดสินใจเลือก ReactJS ดูเหมือนว่ามันจะทำให้ AngularJS ได้รับความนิยมมากขึ้นแม้ว่า AngularJS จะมีส่วนแบ่งการตลาดมากกว่าก็ตามและ ReactJS ได้รับการกล่าวขานว่าเร็วกว่าในการรับ ทิ้งขยะทั้งหมดนั้นไว้ฉันเริ่มเรียนหลักสูตรเกี่ยวกับ Udemy และหลังจากผ่านไปสองสามวิดีโอดูเหมือนว่าสำคัญที่จะต้องดูว่ามันทำงานร่วมกับ Django ได้ดีเพียงใด นั่นคือเมื่อฉันชนกำแพงอย่างหลีกเลี่ยงไม่ได้เพียงแค่ลุกขึ้นและทำงานเอกสารประเภทใดที่มีอยู่เพื่อที่ฉันจะได้ไม่หมุนวงล้อเป็นเวลาหลายชั่วโมงหลายคืน ไม่มีบทช่วยสอนหรือpipแพ็คเกจที่ครอบคลุมจริงๆฉันเจอ pyreactตัวอย่างเช่นฉันพบไม่กี่คนที่ไม่ได้ทำงานหรือไม่ได้ลงวันที่ ความคิดหนึ่งที่ฉันมีคือเพียงแค่จัดการ ReactJS แยกกันโดยสิ้นเชิง แต่โดยคำนึงถึงคลาสและ ID ที่ฉันต้องการให้คอมโพเนนต์ ReactJS แสดงผลหลังจากคอมโพเนนต์ ReactJS แยกเป็นไฟล์ ES5 ไฟล์เดียวเพียงแค่นำเข้าไฟล์เดียวนั้นไปยัง Django แม่แบบ ฉันคิดว่ามันจะพังลงอย่างรวดเร็วเมื่อฉันได้รับการเรนเดอร์จากโมเดล Django แม้ว่า Django Rest Framework จะฟังดูเหมือนมีส่วนเกี่ยวข้อง ยังไม่ไกลพอที่จะดูว่า Redux มีผลต่อสิ่งเหล่านี้อย่างไร อย่างไรก็ตามใครมีวิธีที่ชัดเจนในการใช้ …
143 django  reactjs 

14
ไม่สามารถทำการอัพเดตสถานะการตอบสนองบนส่วนประกอบที่ไม่ได้ต่อเชื่อม
ปัญหา ผมเขียนประยุกต์ใช้ในการตอบสนองและไม่สามารถที่จะหลีกเลี่ยงอันตรายที่พบบ่อยสุดซึ่งจะเรียกหลังจากsetState(...)componentWillUnmount(...) ฉันดูรหัสของตัวเองอย่างถี่ถ้วนและพยายามใส่มาตราการป้องกันไว้ แต่ปัญหายังคงอยู่และฉันยังคงสังเกตคำเตือนอยู่ ดังนั้นฉันมีคำถามสองข้อ: ฉันจะทราบได้อย่างไรจากการติดตามสแต็กคอมโพเนนต์เฉพาะและตัวจัดการเหตุการณ์หรือจุดเชื่อมต่อวงจรชีวิตที่รับผิดชอบต่อการละเมิดกฎ วิธีแก้ไขปัญหาด้วยตัวเองเนื่องจากรหัสของฉันเขียนขึ้นโดยคำนึงถึงข้อผิดพลาดนี้และกำลังพยายามป้องกันอยู่แล้ว แต่ส่วนประกอบพื้นฐานบางส่วนยังคงสร้างคำเตือน คอนโซลเบราว์เซอร์ Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. in TextLayerInternal (created by Context.Consumer) …

3
วิธีใช้วิธีวงจรชีวิต getDerivedStateFromProps ซึ่งตรงข้ามกับ componentWillReceiveProps
ดูเหมือนว่าcomponentWillReceivePropsเป็นไปได้ที่จะค่อย ๆ ออกมาในรุ่นมาในความโปรดปรานของวิธีการที่วงจรชีวิตใหม่getDerivedStateFromProps: getDerivedStateFromProps คงที่ () เมื่อตรวจสอบก็ดูเหมือนว่าคุณอยู่ในขณะนี้ไม่สามารถที่จะทำให้การเปรียบเทียบโดยตรงระหว่างthis.propsและเช่นเดียวกับที่คุณสามารถในnextProps componentWillReceivePropsมีวิธีแก้ไขไหม? นอกจากนี้มันจะส่งคืนวัตถุ ฉันถูกต้องหรือไม่ที่จะสมมติว่าค่าส่งคืนเป็นหลักthis.setStateหรือไม่ ด้านล่างเป็นตัวอย่างที่ผมพบออนไลน์: รัฐที่ได้มาจากการประกอบฉาก / รัฐ ก่อน class ExampleComponent extends React.Component { state = { derivedData: computeDerivedState(this.props) }; componentWillReceiveProps(nextProps) { if (this.props.someValue !== nextProps.someValue) { this.setState({ derivedData: computeDerivedState(nextProps) }); } } } หลังจาก class ExampleComponent extends React.Component { // Initialize state in …

11
React.js: การระบุอินพุตที่แตกต่างด้วย one onChange handler
อยากรู้ว่าทางที่ถูกต้องในการเข้าหาคือ: var Hello = React.createClass({ getInitialState: function() { return {total: 0, input1:0, input2:0}; }, render: function() { return ( <div>{this.state.total}<br/> <input type="text" value={this.state.input1} onChange={this.handleChange} /> <input type="text" value={this.state.input2} onChange={this.handleChange} /> </div> ); }, handleChange: function(e){ this.setState({ ??? : e.target.value}); t = this.state.input1 + this.state.input2; this.setState({total: t}); } }); React.renderComponent(<Hello />, …
142 javascript  reactjs  jsx 

9
การละเมิดที่ไม่คงที่: ไม่พบ“ ร้านค้า” ในบริบทหรืออุปกรณ์ประกอบฉากของ“ เชื่อมต่อ (SportsDatabase)”
รหัสเต็มได้ที่นี่: https://gist.github.com/js08/0ec3d70dfda76d7e9fb4 สวัสดี ฉันมีแอปพลิเคชั่นที่จะแสดงเทมเพลตที่แตกต่างกันสำหรับเดสก์ท็อปและมือถือตามสภาพแวดล้อมการสร้าง ฉันสามารถพัฒนามันได้โดยที่ฉันต้องการซ่อนเมนูนำทางสำหรับเทมเพลตมือถือของฉัน ตอนนี้ฉันสามารถเขียนกรณีทดสอบหนึ่งกรณีซึ่งดึงค่าทั้งหมดผ่าน proptypes และแสดงอย่างถูกต้อง แต่ไม่แน่ใจว่าจะเขียนกรณีทดสอบหน่วยได้อย่างไรเมื่ออุปกรณ์เคลื่อนที่ไม่ควรแสดงองค์ประกอบการนำทาง ฉันพยายาม แต่ฉันพบข้อผิดพลาด ... คุณสามารถบอกฉันได้ว่าจะแก้ไขได้อย่างไร รหัสด้านล่าง กรณีทดสอบ import {expect} from 'chai'; import React from 'react'; import TestUtils from 'react-addons-test-utils'; import {SportsTopPortion} from '../../../src/components/sports-top-portion/sports-top-portion.jsx'; require('../../test-utils/dom'); describe('"sports-top-portion" Unit Tests', function() { let shallowRenderer = TestUtils.createRenderer(); let sportsContentContainerLayout ='mobile'; let sportsContentContainerProfile = {'exists': 'hasSidebar'}; let …
142 reactjs  mocha  redux 

6
ReactJS เรียกเมธอดหลัก
ฉันกำลังก้าวแรกใน ReactJS และพยายามทำความเข้าใจการสื่อสารระหว่างผู้ปกครองและเด็ก ฉันกำลังสร้างแบบฟอร์มดังนั้นฉันจึงมีองค์ประกอบสำหรับฟิลด์สไตล์ และฉันมีองค์ประกอบหลักที่มีฟิลด์และตรวจสอบด้วย ตัวอย่าง: var LoginField = React.createClass({ render: function() { return ( <MyField icon="user_icon" placeholder="Nickname" /> ); }, check: function () { console.log ("aakmslkanslkc"); } }) var MyField = React.createClass({ render: function() { ... }, handleChange: function(event) { //call parent! } }) มีวิธีใดบ้างที่จะทำได้. และตรรกะของฉันดีใน reactjs "โลก" หรือไม่? …

13
TypeScript และ React - เด็กพิมพ์?
ฉันมีส่วนประกอบการทำงานที่ง่ายมากดังนี้: import * as React from 'react'; export interface AuxProps { children: React.ReactNode } const aux = (props: AuxProps) => props.children; export default aux; และส่วนประกอบอื่น: import * as React from "react"; export interface LayoutProps { children: React.ReactNode } const layout = (props: LayoutProps) => ( <Aux> <div>Toolbar, SideDrawer, Backdrop</div> <main> …

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.