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

ด้วยreact-routerฉันสามารถใช้Linkองค์ประกอบในการสร้างลิงค์ที่จัดการโดยกำเนิดเราเตอร์ ฉันเห็นการโทรthis.context.transitionTo(...)ภายใน ฉันต้องการนำทาง ไม่ใช่จากลิงก์ แต่มาจากตัวเลือกแบบเลื่อนลง (เป็นตัวอย่าง) ฉันจะทำสิ่งนี้ในรหัสได้อย่างไร คือthis.contextอะไร ผมเห็นNavigationmixin แต่ฉันสามารถทำเช่นนี้ไม่mixins?

1428 reactjs  react-router 

ฉันพยายามทำสิ่งต่อไปนี้ใน React JSX(โดยที่ ObjectRow เป็นส่วนประกอบแยกต่างหาก): <tbody> for (var i=0; i < numrows; i++) { <ObjectRow/> } </tbody> ฉันรู้และเข้าใจว่าทำไมสิ่งนี้จึงไม่ถูกต้องJSXเนื่องจากJSXแผนที่เพื่อใช้งานการโทร อย่างไรก็ตามมาจากเทมเพลตและเป็นสิ่งใหม่สำหรับJSXฉันไม่แน่ใจว่าฉันจะบรรลุเป้าหมายข้างต้นได้อย่างไร (การเพิ่มองค์ประกอบหลาย ๆ ครั้ง)

1278 javascript  reactjs 

ปิด คำถามนี้เป็นคำถามความคิดเห็นตาม ไม่ยอมรับคำตอบในขณะนี้ ปิดเมื่อปีที่แล้ว ล็อคแล้ว คำถามและคำตอบนี้ถูกล็อคเนื่องจากคำถามอยู่นอกหัวข้อ แต่มีความสำคัญทางประวัติศาสตร์ ขณะนี้ไม่ยอมรับคำตอบหรือการโต้ตอบใหม่ ฉันได้อ่านคำตอบนี้ , ลดสำเร็จรูปมองที่ GitHub ตัวอย่างไม่กี่และแม้กระทั่งพยายาม Redux นิด ๆ หน่อย ๆ (ปพลิเคชันที่ต้องทำ) ดังที่ฉันเข้าใจแรงจูงใจ doc redux ทางการให้ข้อดีเมื่อเปรียบเทียบกับสถาปัตยกรรม MVC แบบดั้งเดิม แต่มันไม่ได้ให้คำตอบสำหรับคำถาม: ทำไมคุณควรใช้ Redux บน Facebook Flux นั่นเป็นเพียงคำถามของสไตล์การเขียนโปรแกรม: functional vs non-functional หรือไม่? หรือคำถามอยู่ในความสามารถ / เครื่องมือ dev ที่ตามมาจากวิธีการ redux? อาจจะปรับขนาด? หรือทดสอบ? ฉันพูดถูกหรือไม่ถ้าฉันบอกว่า redux เป็นฟลักซ์สำหรับผู้ที่มาจากภาษาที่ใช้งานได้ เพื่อตอบคำถามนี้คุณอาจเปรียบเทียบความซับซ้อนของการใช้คะแนนแรงจูงใจของ redux กับ …

1126 javascript  reactjs  reactjs-flux  flux  redux 

สิ่งที่...ต้องทำในโค้ดของ React (ใช้ JSX) และเรียกว่าอะไร? <Modal {...this.props} title='Modal heading' animation={false}>

897 javascript  reactjs 

ฉันพยายามหาวิธีที่เหมาะสมในการกำหนดองค์ประกอบบางอย่างซึ่งสามารถใช้ในวิธีทั่วไป: <Parent> <Child value="1"> <Child value="2"> </Parent> มีตรรกะที่เกิดขึ้นสำหรับการแสดงผลระหว่างผู้ปกครองและองค์ประกอบของเด็กแน่นอนคุณสามารถจินตนาการ<select>และ<option>เป็นตัวอย่างของตรรกะนี้ นี่คือการดำเนินการจำลองเพื่อวัตถุประสงค์ของคำถาม: var Parent = React.createClass({ doSomething: function(value) { }, render: function() { return (<div>{this.props.children}</div>); } }); var Child = React.createClass({ onClick: function() { this.props.doSomething(this.props.value); // doSomething is undefined }, render: function() { return (<div onClick={this.onClick}></div>); } }); คำถามคือเมื่อใดก็ตามที่คุณใช้{this.props.children}ในการกำหนดองค์ประกอบ wrapper คุณจะส่งผ่านคุณสมบัติบางอย่างให้กับลูก ๆ ของมันได้อย่างไร

888 javascript  reactjs  react-jsx 

ฉันเริ่มเรียนรู้ที่จะตอบโต้ด้วยความอยากรู้อยากเห็นและต้องการทราบความแตกต่างระหว่าง React และ React Native - แม้ว่าจะไม่สามารถหาคำตอบที่น่าพอใจโดยใช้ Google React และ React Native น่าจะมีรูปแบบเดียวกัน พวกเขามีไวยากรณ์ที่แตกต่างอย่างสิ้นเชิง?

730 javascript  reactjs  react-native  javascript-framework 

ฉันมีวัตถุภายนอก (ไปยังส่วนประกอบ) ซึ่งสามารถสังเกตได้ที่ฉันต้องการฟังเพื่อการเปลี่ยนแปลง เมื่อวัตถุได้รับการปรับปรุงมันจะปล่อยกิจกรรมการเปลี่ยนแปลงและจากนั้นฉันต้องการที่จะแสดงส่วนประกอบอีกครั้งเมื่อตรวจพบการเปลี่ยนแปลงใด ๆ ด้วยระดับบนสุดReact.renderสิ่งนี้เป็นไปได้ แต่ภายในองค์ประกอบมันใช้งานไม่ได้ (ซึ่งทำให้เข้าใจได้ตั้งแต่renderวิธีการส่งคืนวัตถุ) นี่คือตัวอย่างรหัส: export default class MyComponent extends React.Component { handleButtonClick() { this.render(); } render() { return ( <div> {Math.random()} <button onClick={this.handleButtonClick.bind(this)}> Click me </button> </div> ) } } การคลิกปุ่มโทรภายในthis.render()แต่นั่นไม่ใช่สิ่งที่ทำให้เกิดการแสดงผลจริง (คุณสามารถเห็นสิ่งนี้ได้ในทางปฏิบัติเพราะข้อความที่สร้างขึ้นโดย{Math.random()}ไม่เปลี่ยนแปลง) อย่างไรก็ตามถ้าฉันเพียงแค่โทรthis.setState()แทนthis.render()มันก็ใช้ได้ดี ดังนั้นฉันเดาว่าคำถามของฉันคือองค์ประกอบการตอบสนองต้องมีสถานะเพื่อแสดงซ้ำหรือไม่ มีวิธีบังคับให้ส่วนประกอบอัปเดตตามคำขอโดยไม่เปลี่ยนสถานะหรือไม่

690 reactjs  react-jsx 

ตามเอกสารที่"โดยตัวกลาง Redux เก็บสนับสนุนเฉพาะการไหลของข้อมูลซิงโคร" ฉันไม่เข้าใจว่าทำไมถึงเป็นเช่นนี้ ทำไมส่วนประกอบคอนเทนเนอร์ไม่สามารถเรียกใช้ async API จากนั้นจึงdispatchดำเนินการ ตัวอย่างเช่นลองจินตนาการถึง UI ที่เรียบง่าย: ฟิลด์และปุ่ม เมื่อผู้ใช้กดปุ่มฟิลด์จะถูกเติมด้วยข้อมูลจากเซิร์ฟเวอร์ระยะไกล import * as React from 'react'; import * as Redux from 'redux'; import { Provider, connect } from 'react-redux'; const ActionTypes = { STARTED_UPDATING: 'STARTED_UPDATING', UPDATED: 'UPDATED' }; class AsyncApi { static getFieldValue() { const promise = …

686 javascript  asynchronous  reactjs  redux  redux-thunk 

ฉันกำลังสร้างส่วนประกอบ React ที่ยอมรับแหล่งข้อมูล JSON และสร้างตารางที่สามารถเรียงลำดับได้ แถวข้อมูลแบบไดนามิกแต่ละแถวมีคีย์เฉพาะที่กำหนดให้ แต่ฉันยังคงได้รับข้อผิดพลาด: เด็กแต่ละคนในอาร์เรย์ควรมีเสา "คีย์" ที่ไม่ซ้ำกัน ตรวจสอบวิธีการเรนเดอร์ของ TableComponent TableComponentวิธีการแสดงผลของฉันกลับมา: <table> <thead key="thead"> <TableHeader columns={columnNames}/> </thead> <tbody key="tbody"> { rows } </tbody> </table> TableHeaderองค์ประกอบเป็นแถวเดียวและยังมีความสำคัญที่ไม่ซ้ำกันที่ได้รับมอบหมาย แต่ละrowin rowsสร้างจากส่วนประกอบที่มีคีย์เฉพาะ: <TableRowItem key={item.id} data={item} columns={columnNames}/> และTableRowItemดูเหมือนว่านี้: var TableRowItem = React.createClass({ render: function() { var td = function() { return this.props.columns.map(function(c) { return …

655 javascript  reactjs 

ฉันใช้ React-router และทำงานได้ดีในขณะที่ฉันคลิกที่ปุ่มลิงค์ แต่เมื่อฉันรีเฟรชหน้าเว็บของฉันมันไม่โหลดสิ่งที่ฉันต้องการ ตัวอย่างเช่นฉันอยู่localhost/joblistและทุกอย่างดีเพราะฉันมาถึงที่นี่กดลิงค์ แต่ถ้าฉันรีเฟรชหน้าเว็บฉันจะได้รับ: Cannot GET /joblist โดยค่าเริ่มต้นมันไม่ทำงานเช่นนี้ ตอนแรกผมมี URL ของฉันเป็นlocalhost/#/และlocalhost/#/joblistและพวกเขาทำงานอย่างสมบูรณ์ดี แต่ฉันไม่ชอบ URL ประเภทนี้ดังนั้นพยายามที่จะลบมัน#ฉันเขียน: Router.run(routes, Router.HistoryLocation, function (Handler) { React.render(<Handler/>, document.body); }); ปัญหานี้ไม่ได้เกิดขึ้นlocalhost/สิ่งนี้กลับมาในสิ่งที่ฉันต้องการเสมอ แก้ไข:แอพนี้เป็นหน้าเดียวดังนั้น/joblistไม่จำเป็นต้องถามอะไรเลยกับเซิร์ฟเวอร์ใด ๆ EDIT2:เราเตอร์ทั้งหมดของฉัน var routes = ( <Route name="app" path="/" handler={App}> <Route name="joblist" path="/joblist" handler={JobList}/> <DefaultRoute handler={Dashboard}/> <NotFoundRoute handler={NotFound}/> </Route> ); Router.run(routes, Router.HistoryLocation, function (Handler) …

653 javascript  reactjs  url  react-router 

ฉันต้องการอ่านคุณสมบัติค่าเหตุการณ์ onClick แต่เมื่อฉันคลิกที่มันฉันเห็นสิ่งนี้บนคอนโซล: SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", nativeEvent: MouseEvent, type: "click", target รหัสของฉันทำงานอย่างถูกต้อง เมื่อฉันเรียกใช้ฉันสามารถเห็น{column}แต่ไม่สามารถรับได้ในเหตุการณ์ onClick รหัสของฉัน: var HeaderRows = React.createClass({ handleSort: function(value) { console.log(value); }, render: function () { var that = this; return( <tr> {this.props.defaultColumns.map(function (column) { return ( <th value={column} onClick={that.handleSort} >{column}</th> ); })} {this.props.externalColumns.map(function (column) { …

638 javascript  reactjs 

วิธีการตอบสนองของการตั้งค่าการมุ่งเน้นไปที่ช่องข้อความเฉพาะหลังจากที่มีการแสดงองค์ประกอบ? เอกสารดูเหมือนว่าจะแนะนำให้ใช้ refs เช่น: ตั้งค่าref="nameInput"ในฟิลด์อินพุตของฉันในฟังก์ชั่นการแสดงผลแล้วโทร: this.refs.nameInput.getInputDOMNode().focus(); แต่ฉันจะเรียกสิ่งนี้ได้ที่ไหน ฉันลองไปหลายที่แล้วแต่ไม่สามารถใช้งานได้

629 javascript  reactjs 

ฉันกำลังดูหลักสูตร Pluralsight เกี่ยวกับ React และผู้สอนระบุว่าไม่ควรเปลี่ยนอุปกรณ์ประกอบฉาก ตอนนี้ฉันกำลังอ่านบทความ (uberVU / react-guide)บนอุปกรณ์ประกอบฉากเทียบกับรัฐและมันบอกว่า ทั้งการเปลี่ยนอุปกรณ์ประกอบฉากและสถานะจะกระตุ้นการอัพเดท ต่อมาในบทความมันบอกว่า: อุปกรณ์ประกอบฉาก (ย่อมาจากคุณสมบัติ) คือการกำหนดค่าของคอมโพเนนต์ตัวเลือกของอุปกรณ์นั้นหากคุณสามารถ พวกเขาได้รับจากด้านบนและไม่เปลี่ยนรูป ดังนั้นอุปกรณ์ประกอบฉากสามารถเปลี่ยนได้ แต่ควรเปลี่ยนไม่ได้? คุณควรใช้อุปกรณ์ประกอบฉากเมื่อใดและเมื่อใดที่คุณควรใช้สถานะ หากคุณมีข้อมูลที่องค์ประกอบการตอบสนองความต้องการมันควรจะถูกส่งผ่านอุปกรณ์ประกอบฉากหรือการติดตั้งในองค์ประกอบการทำปฏิกิริยาผ่านgetInitialState?

559 javascript  reactjs 

มีวิธีการที่จะเพิ่มคุณสมบัติให้กับองค์ประกอบการตอบสนองหากเงื่อนไขตรงหรือไม่? ฉันควรจะเพิ่มแอตทริบิวต์ที่จำเป็นและ readOnly เพื่อสร้างองค์ประกอบตามการเรียก Ajax หลังจากแสดงผล แต่ฉันไม่เห็นวิธีแก้ปัญหานี้เนื่องจาก readOnly = "false" ไม่เหมือนกับการละเว้นแอตทริบิวต์ทั้งหมด ตัวอย่างด้านล่างควรอธิบายสิ่งที่ฉันต้องการ แต่จะไม่ทำงาน (ข้อผิดพลาดในการแยกวิเคราะห์: ตัวระบุที่ไม่คาดคิด) var React = require('React'); var MyOwnInput = React.createClass({ render: function () { return ( <div> <input type="text" onChange={this.changeValue} value={this.getValue()} name={this.props.name}/> </div> ); } }); module.exports = React.createClass({ getInitialState: function () { return { isRequired: false …

551 javascript  reactjs 

ฉันยุ่งกับ React.js เป็นครั้งแรกและไม่สามารถหาวิธีแสดงหรือซ่อนบางสิ่งบางอย่างบนหน้าเว็บผ่านเหตุการณ์การคลิก ฉันไม่ได้โหลดไลบรารี่อื่น ๆ ไปที่หน้าดังนั้นฉันกำลังมองหาวิธีดั้งเดิมในการใช้ไลบรารี่ React นี่คือสิ่งที่ฉันมี ฉันต้องการแสดง div ผลลัพธ์เมื่อเหตุการณ์การคลิกเกิดขึ้น var Search= React.createClass({ handleClick: function (event) { console.log(this.prop); }, render: function () { return ( <div className="date-range"> <input type="submit" value="Search" onClick={this.handleClick} /> </div> ); } }); var Results = React.createClass({ render: function () { return ( <div id="results" className="search-results"> …

532 javascript  reactjs