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

ฉันยังใหม่กับ React Router และเรียนรู้ว่ามีหลายวิธีในการเปลี่ยนเส้นทางเพจ: การใช้ browserHistory.push("/path") import { browserHistory } from 'react-router'; //do something... browserHistory.push("/path"); การใช้ this.context.router.push("/path") class Foo extends React.Component { constructor(props, context) { super(props, context); //do something... } redirect() { this.context.router.push("/path") } } Foo.contextTypes = { router: React.PropTypes.object } ใน React Router v4 มีthis.context.history.push("/path")และthis.props.history.push("/path"). รายละเอียด: จะพุชไปที่ History ใน …

116 reactjs  redux  react-router 

พิจารณาตัวอย่างตะขอด้านล่าง import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } โดยทั่วไปเราใช้เมธอด this.forceUpdate () เพื่อบังคับให้คอมโพเนนต์แสดงผลซ้ำทันทีในคอมโพเนนต์คลาส React ดังตัวอย่างด้านล่าง class Test extends Component{ constructor(props){ super(props); this.state = { count:0, …

116 javascript  reactjs  react-native  react-hooks 

ฉันมีส่วนประกอบต่อไปนี้ ( radioOther.jsx): 'use strict'; //module.exports = <-- omitted in update class RadioOther extends React.Component { // omitted in update // getInitialState() { // propTypes: { // name: React.PropTypes.string.isRequired // } // return { // otherChecked: false // } // } componentDidUpdate(prevProps, prevState) { var otherRadBtn = this.refs.otherRadBtn.getDOMNode(); if (prevState.otherChecked …

115 reactjs  ecmascript-6 

รับข้อผิดพลาดนี้ขณะสร้างแอป iOS ที่ตอบสนองบน xcode เริ่มรับข้อผิดพลาดนี้หลังจากการติดตั้ง npm และ rpm เชื่อมโยงไลบรารีreact-native-fs แต่หลังจากค้นหาวิธีแก้ปัญหาทางออนไลน์ฉันสังเกตเห็นว่ามีคนจำนวนมากได้รับข้อผิดพลาดเดียวกันในขณะที่ติดตั้งไลบรารีดั้งเดิมที่ตอบสนองอื่น ๆ วิธีการแก้ปัญหาที่เป็นไปได้แนะนำโดยหลายคนมีการเพิ่มความต่อไปนี้ "การตั้งค่ารูปร่าง" -> "หัวค้นหาเส้นทาง" $(SRCROOT)/../node_modules/react-native/React - (เรียกซ้ำ) แต่ไม่มีโชคกับการแก้ปัญหานี้ยังคงได้รับข้อผิดพลาดเดียวกัน

115 ios  xcode  reactjs  native  react-native-ios 

เป็นไปได้ไหมที่จะได้รับตำแหน่งการเลื่อนปัจจุบันหรือหน้าปัจจุบันของ<ScrollView>ส่วนประกอบใน React Native สิ่งที่ชอบ: <ScrollView horizontal={true} pagingEnabled={true} onScrollAnimationEnd={() => { // get this scrollview's current page or x/y scroll position }}> this.state.data.map(function(e, i) { <ImageCt key={i}></ImageCt> }) </ScrollView>

115 ios  reactjs  react-native 

ฉันเพิ่งเริ่มสำรวจ React โดยการเพิ่มส่วนประกอบที่มีฟังก์ชันการแสดงผลอย่างง่าย: render() { return <div class="myApp"></div> } เมื่อฉันเรียกใช้แอพฉันได้รับข้อผิดพลาดต่อไปนี้: Warning: Unknown DOM property class. Did you mean className? ฉันสามารถแก้ปัญหานี้โดยการเปลี่ยนไปclassclassName คำถามคือ; React บังคับใช้อนุสัญญานี้หรือไม่ นอกจากนี้ทำไมฉันต้องใช้classNameแทนของเดิมclass? หากนี่เป็นข้อ จำกัด นั่นเป็นเพราะไวยากรณ์ JSX หรือที่อื่น?

115 javascript  reactjs  react-jsx 

ฉันเล่นกับ React และมีองค์ประกอบเวลาต่อไปนี้ที่แสดงผลDate.now()บนหน้าจอ: import React, { Component } from 'react'; class TimeComponent extends Component { constructor(props){ super(props); this.state = { time: Date.now() }; } render(){ return( <div> { this.state.time } </div> ); } componentDidMount() { console.log("TimeComponent Mounted...") } } export default TimeComponent; วิธีใดเป็นวิธีที่ดีที่สุดในการทำให้ส่วนประกอบนี้อัปเดตทุก ๆ วินาทีเพื่อดึงเวลาจากมุมมองของปฏิกิริยาอีกครั้ง

115 javascript  reactjs 

ฉันพยายามใช้ React.forwardRef แต่สะดุดวิธีทำให้มันทำงานในองค์ประกอบตามคลาส (ไม่ใช่ HOC) ตัวอย่างเอกสารใช้องค์ประกอบและส่วนประกอบที่ใช้งานได้แม้กระทั่งการตัดคลาสในฟังก์ชันสำหรับส่วนประกอบลำดับที่สูงกว่า เริ่มต้นด้วยสิ่งนี้ในref.jsไฟล์: const TextInput = React.forwardRef( (props, ref) => (<input type="text" placeholder="Hello World" ref={ref} />) ); และแทนที่จะกำหนดเป็นดังนี้: class TextInput extends React.Component { render() { let { props, ref } = React.forwardRef((props, ref) => ({ props, ref })); return <input type="text" placeholder="Hello World" ref={ref} />; } …

115 javascript  reactjs 

วันนี้ฉันได้เริ่มเรียนรู้ ReactJS และหลังจากผ่านไปหนึ่งชั่วโมงต้องเผชิญกับปัญหา .. ฉันต้องการแทรกส่วนประกอบที่มีสองแถวภายใน div บนหน้าตัวอย่างง่ายๆของสิ่งที่ฉันกำลังทำอยู่ด้านล่าง ฉันมี html: <html> .. <div id="component-placeholder"></div> .. </html> ฟังก์ชัน Render ดังนี้: ... render: function() { return( <div className="DeadSimpleComponent"> <div className="DeadSimpleComponent__time">10:23:12</div > <div className="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div> </div> ) } .... และด้านล่างฉันเรียกว่า render: ReactDOM.render(<DeadSimpleComponent/>, document.getElementById('component-placeholder')); HTML ที่สร้างขึ้นมีลักษณะดังนี้: <html> .. <div id="component-placeholder"> <div class="DeadSimpleComponent"> <div …

115 javascript  reactjs 

อะไรnpm run ejectคำสั่งทำอย่างไร ฉันเข้าใจคำสั่งอื่น ๆ เช่น start, build, test แต่ไม่มีความคิดเกี่ยวกับการดีดออก

115 reactjs  webpack  create-react-app  react-scripts 

ฉันเล่นกับระบบ hook ใหม่ใน React 16.7-alpha และติดอยู่ในวงวนที่ไม่มีที่สิ้นสุดใน useEffect เมื่อสถานะที่ฉันจัดการคือวัตถุหรืออาร์เรย์ ขั้นแรกฉันใช้ useState และเริ่มต้นด้วยวัตถุว่างเช่นนี้: const [obj, setObj] = useState({}); จากนั้นใน useEffect ฉันใช้ setObj เพื่อตั้งค่าเป็นวัตถุว่างอีกครั้ง ในฐานะอาร์กิวเมนต์ที่สองฉันกำลังส่ง [obj] โดยหวังว่าจะไม่อัปเดตหากเนื้อหาของวัตถุไม่เปลี่ยนแปลง แต่จะอัปเดตอยู่เสมอ ฉันเดาว่าเพราะไม่ว่าเนื้อหาจะเป็นอย่างไรสิ่งเหล่านี้เป็นวัตถุที่แตกต่างกันเสมอทำให้ React คิดว่ามันเปลี่ยนไปเรื่อย ๆ ? useEffect(() => { setIngredients({}); }, [ingredients]); เช่นเดียวกับอาร์เรย์ แต่เป็นแบบดั้งเดิมมันจะไม่ติดอยู่ในลูปอย่างที่คาดไว้ เมื่อใช้ hooks ใหม่เหล่านี้ฉันจะจัดการกับวัตถุและอาร์เรย์ได้อย่างไรเมื่อตรวจสอบสภาพอากาศว่าเนื้อหามีการเปลี่ยนแปลงหรือไม่

115 reactjs  react-hooks 

โดยปกติแล้วในการรวมไอคอน SVG ส่วนใหญ่ของฉันที่ต้องใช้สไตล์เรียบง่ายฉันทำ <svg> <use xlink:href="/svg/svg-sprite#my-icon" /> </svg> ตอนนี้ฉันได้เล่นกับ ReactJS แล้วเมื่อประเมินว่ามันเป็นองค์ประกอบที่เป็นไปได้ในกองพัฒนาส่วนหน้าใหม่ของฉัน แต่ฉันสังเกตเห็นว่าในรายการแท็ก / แอตทริบิวต์ที่รองรับไม่รองรับuseหรือไม่xlink:hrefได้รับการสนับสนุน เป็นไปได้ไหมที่จะใช้สไปรต์ svg และโหลดด้วยวิธีนี้ใน ReactJS

114 svg  sprite  reactjs 

แอปพลิเคชันของเราใช้การเลื่อนแบบไม่มีที่สิ้นสุดเพื่อนำทางรายการที่แตกต่างกันจำนวนมาก มีริ้วรอยเล็กน้อย: เป็นเรื่องปกติที่ผู้ใช้ของเราจะมีรายการ 10,000 รายการและต้องเลื่อนดู 3k + สิ่งเหล่านี้เป็นรายการที่สมบูรณ์ดังนั้นเราจึงมีเพียงไม่กี่ร้อยรายการใน DOM ก่อนที่ประสิทธิภาพของเบราว์เซอร์จะไม่เป็นที่ยอมรับ รายการมีความสูงแตกต่างกัน รายการอาจมีรูปภาพและเราอนุญาตให้ผู้ใช้ข้ามไปยังวันที่ที่ระบุ นี่เป็นเรื่องยุ่งยากเนื่องจากผู้ใช้สามารถข้ามไปยังจุดหนึ่งในรายการที่เราต้องโหลดภาพเหนือวิวพอร์ตซึ่งจะดันเนื้อหาลงเมื่อโหลด ไม่สามารถจัดการได้นั่นหมายความว่าผู้ใช้อาจข้ามไปยังวันที่ แต่จะถูกเลื่อนไปเป็นวันที่ก่อนหน้านี้ โซลูชันที่เป็นที่รู้จักและไม่สมบูรณ์: ( react-infinite-scroll ) - นี่เป็นเพียงคอมโพเนนต์ "โหลดมากขึ้นเมื่อเรากดด้านล่าง" มันไม่ได้คัดแยก DOM ใด ๆ ออกไปดังนั้นมันจะตายในหลายพันรายการ ( ตำแหน่งการเลื่อนด้วยปฏิกิริยา ) - แสดงวิธีการจัดเก็บและเรียกคืนตำแหน่งการเลื่อนเมื่อใส่ที่ด้านบนหรือแทรกที่ด้านล่าง แต่ไม่ใช่ทั้งสองอย่างพร้อมกัน ฉันไม่ได้มองหาโค้ดสำหรับโซลูชันที่สมบูรณ์ (แม้ว่าจะดีมากก็ตาม) แต่ฉันกำลังมองหา "วิธีตอบสนอง" เพื่อจำลองสถานการณ์นี้ สถานะตำแหน่งเลื่อนหรือไม่? ฉันควรติดตามสถานะใดเพื่อรักษาตำแหน่งของฉันไว้ในรายการ ฉันต้องเก็บสถานะอะไรเพื่อที่จะทริกเกอร์การเรนเดอร์ใหม่เมื่อฉันเลื่อนไปใกล้ด้านล่างหรือด้านบนของสิ่งที่แสดงผล

114 javascript  html  infinite-scroll  reactjs 

หนึ่งในข้อได้เปรียบที่ใหญ่ที่สุดของReact.jsควรจะเป็นการแสดงผลด้านเซิร์ฟเวอร์ ปัญหาคือฟังก์ชันคีย์React.renderComponentToString()เป็นแบบซิงโครนัสซึ่งทำให้ไม่สามารถโหลดข้อมูลอะซิงโครนัสใด ๆ ได้เนื่องจากลำดับชั้นของคอมโพเนนต์แสดงบนเซิร์ฟเวอร์ สมมติว่าฉันมีองค์ประกอบสากลสำหรับการแสดงความคิดเห็นซึ่งฉันสามารถวางไว้ที่ใดก็ได้บนหน้า มีเพียงคุณสมบัติเดียวตัวระบุบางประเภท (เช่น id ของบทความด้านล่างที่มีการใส่ความคิดเห็น) และทุกอย่างจะถูกจัดการโดยคอมโพเนนต์เอง (การโหลดการเพิ่มการจัดการความคิดเห็น) ฉันชอบสถาปัตยกรรมFluxมากเพราะมันทำให้หลาย ๆ อย่างง่ายขึ้นมากและร้านค้าก็เหมาะสำหรับการแชร์สถานะระหว่างเซิร์ฟเวอร์และไคลเอนต์ เมื่อเริ่มต้นร้านค้าของฉันที่มีความคิดเห็นแล้วฉันก็สามารถทำให้เป็นซีเรียลไลซ์และส่งจากเซิร์ฟเวอร์ไปยังไคลเอนต์ซึ่งเรียกคืนได้อย่างง่ายดาย คำถามคือวิธีใดเป็นวิธีที่ดีที่สุดในการเติมข้อมูลร้านค้าของฉัน ในช่วงหลายวันที่ผ่านมาฉัน Googling มากและฉันเจอกลยุทธ์บางอย่างซึ่งดูเหมือนจะไม่ดีเลยเมื่อพิจารณาว่าคุณสมบัติของ React นี้ได้รับการ "โปรโมต" มากแค่ไหน ในความคิดของฉันวิธีที่ง่ายที่สุดคือเติมข้อมูลร้านค้าทั้งหมดของฉันก่อนที่การแสดงผลจริงจะเริ่มขึ้น นั่นหมายถึงบางแห่งที่อยู่นอกลำดับชั้นของส่วนประกอบ (เช่นต่อกับเราเตอร์ของฉัน) ปัญหาของวิธีนี้คือฉันจะต้องกำหนดโครงสร้างหน้าสองครั้ง พิจารณาหน้าเว็บที่ซับซ้อนมากขึ้นตัวอย่างเช่นหน้าบล็อกที่มีส่วนประกอบต่างๆมากมาย (โพสต์ในบล็อกจริงความคิดเห็นโพสต์ที่เกี่ยวข้องโพสต์ใหม่ล่าสุดกระแส Twitter ... ) ฉันจะต้องออกแบบโครงสร้างเพจโดยใช้ส่วนประกอบ React จากนั้นที่อื่นฉันจะต้องกำหนดขั้นตอนการเติมข้อมูลแต่ละร้านที่ต้องการสำหรับเพจปัจจุบันนี้ ดูเหมือนจะไม่ใช่ทางออกที่ดีสำหรับฉัน น่าเสียดายที่แบบฝึกหัด isomorphic ส่วนใหญ่ได้รับการออกแบบด้วยวิธีนี้ (เช่นการสอนเกี่ยวกับฟลักซ์ที่ยอดเยี่ยมนี้) ตอบสนอง-async แนวทางนี้เหมาะอย่างยิ่ง ช่วยให้ฉันกำหนดฟังก์ชันพิเศษในแต่ละองค์ประกอบว่าจะเริ่มต้นสถานะอย่างไร (ไม่สำคัญว่าจะซิงโครนัสหรืออะซิงโครนัส) และฟังก์ชันเหล่านี้เรียกว่าลำดับชั้นกำลังแสดงผลเป็น HTML มันทำงานในลักษณะที่ส่วนประกอบจะไม่แสดงผลจนกว่าสถานะจะเริ่มต้นอย่างสมบูรณ์ ปัญหาคือมันต้องใช้Fibersซึ่งเท่าที่ฉันเข้าใจส่วนขยาย Node.js ที่เปลี่ยนแปลงพฤติกรรม …

114 node.js  reactjs  flux  reactjs-flux 

ฉันรู้ว่ามีการถามคำถามนี้สองสามครั้งแล้ว แต่ส่วนใหญ่แล้ววิธีแก้ปัญหาคือจัดการกับสิ่งนี้ในผู้ปกครองเนื่องจากการไหลของความรับผิดชอบจะลดลงเท่านั้น อย่างไรก็ตามบางครั้งคุณต้องฆ่าส่วนประกอบจากวิธีใดวิธีหนึ่ง ฉันรู้ว่าฉันไม่สามารถแก้ไขอุปกรณ์ประกอบฉากได้และถ้าฉันเริ่มเพิ่มบูลีนเป็นสถานะมันจะเริ่มยุ่งมากสำหรับส่วนประกอบง่ายๆ นี่คือสิ่งที่ฉันพยายามบรรลุ: คอมโพเนนต์กล่องข้อผิดพลาดเล็ก ๆ ที่มี "x" เพื่อปิด การรับข้อผิดพลาดผ่านอุปกรณ์ประกอบฉากจะแสดงขึ้น แต่ฉันต้องการวิธีปิดจากรหัสของตัวเอง class ErrorBoxComponent extends React.Component { dismiss() { // What should I put here? } render() { if (!this.props.error) { return null; } return ( <div data-alert className="alert-box error-box"> {this.props.error} <a href="#" className="close" onClick={this.dismiss.bind(this)}>×</a> </div> ); } } export …

114 reactjs  unmount