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

ฉันกำลังทำงานกับ Javascript (ES6) / FaceBook ตอบสนองและพยายามรับ 3 องค์ประกอบแรกของอาร์เรย์ที่มีขนาดแตกต่างกันไป ฉันต้องการทำสิ่งที่เทียบเท่ากับ Linq take (n) ในไฟล์ Jsx ของฉันฉันมีดังต่อไปนี้: var items = list.map(i => { return ( <myview item={i} key={i.id} /> ); }); จากนั้นเพื่อรับ 3 รายการแรกที่ฉันลอง var map = new Map(list); map.size = 3; var items = map(i => { return (<SpotlightLandingGlobalInboxItem item={i} key={i.id} …

383 javascript  reactjs 

ผมเห็นปฏิกิริยาพูดคุย dev ที่ ( พีทล่า: React: ทบทวนการปฏิบัติที่ดีที่สุด - JSConf สหภาพยุโรป 2013 ) และลำโพงที่กล่าวว่าสกปรกการตรวจสอบของรูปแบบได้ช้า แต่ไม่ได้คำนวณความแตกต่างระหว่าง DOM เสมือนจริงแม้จะมีประสิทธิภาพน้อยกว่าตั้งแต่ DOM เสมือนในกรณีส่วนใหญ่ควรมีขนาดใหญ่กว่าแบบจำลองใช่หรือไม่ ฉันชอบพลังที่อาจเกิดขึ้นของ Virtual DOM (โดยเฉพาะอย่างยิ่งการเรนเดอร์ฝั่งเซิร์ฟเวอร์) แต่ฉันต้องการทราบข้อดีและข้อเสียทั้งหมด

372 javascript  dom  reactjs  virtual-dom 

ฉันมีแอพที่ฉันต้องตั้งความสูงขององค์ประกอบ (เรียกว่า "เนื้อหาของแอพ") แบบไดนามิก ใช้ความสูงของ "chrome" ของแอพและลบออกแล้วตั้งค่าความสูงของ "เนื้อหาแอพ" ให้พอดี 100% ภายในข้อ จำกัด เหล่านั้น นี่เป็นเรื่องง่ายสุด ๆ กับมุมมองวานิลลา JS, jQuery หรือ Backbone แต่ฉันพยายามที่จะเข้าใจว่ากระบวนการที่เหมาะสมสำหรับการทำเช่นนี้ใน React? ด้านล่างเป็นองค์ประกอบตัวอย่าง ฉันต้องการที่จะสามารถตั้งค่าapp-contentความสูงของการเป็น 100% ของหน้าต่างลบด้วยขนาดของActionBarและBalanceBarแต่ฉันจะรู้ได้อย่างไรเมื่อทุกอย่างถูกแสดงผลและฉันจะใส่ข้อมูลการคำนวณในชั้นเรียนนี้ได้ที่ไหน /** @jsx React.DOM */ var List = require('../list'); var ActionBar = require('../action-bar'); var BalanceBar = require('../balance-bar'); var Sidebar = require('../sidebar'); var AppBase = React.createClass({ …

367 javascript  reactjs 

ใน React Router (v3) รุ่นปัจจุบันฉันสามารถยอมรับการตอบกลับของเซิร์ฟเวอร์และใช้browserHistory.pushเพื่อไปที่หน้าการตอบสนองที่เหมาะสม อย่างไรก็ตามนี่ไม่สามารถใช้ได้ใน v4 และฉันไม่แน่ใจว่าวิธีการที่เหมาะสมในการจัดการนี้คืออะไร ในตัวอย่างนี้ใช้ Redux, ส่วนประกอบ / การตรวจสอบผลิตภัณฑ์ form.jsโทรthis.props.addProduct(props)เมื่อผู้ใช้ส่งแบบฟอร์ม เมื่อเซิร์ฟเวอร์กลับสู่ความสำเร็จผู้ใช้จะถูกนำไปที่หน้ารถเข็น // actions/index.js export function addProduct(props) { return dispatch => axios.post(`${ROOT_URL}/cart`, props, config) .then(response => { dispatch({ type: types.AUTH_USER }); localStorage.setItem('token', response.data.token); browserHistory.push('/cart'); // no longer in React Router V4 }); } ฉันจะเปลี่ยนเส้นทางไปยังหน้ารถเข็นจากฟังก์ชั่นสำหรับ React Router v4 …

360 reactjs  react-router  react-router-v4 

ฉันมีองค์ประกอบการตอบสนองที่เรียบง่ายด้วยแบบฟอร์มซึ่งฉันเชื่อว่ามีอินพุตที่ควบคุมได้หนึ่งรายการ: import React from 'react'; export default class MyForm extends React.Component { constructor(props) { super(props); this.state = {} } render() { return ( <form className="add-support-staff-form"> <input name="name" type="text" value={this.state.name} onChange={this.onFieldChange('name').bind(this)}/> </form> ) } onFieldChange(fieldName) { return function (event) { this.setState({[fieldName]: event.target.value}); } } } export default MyForm; เมื่อฉันเรียกใช้แอปพลิเคชันของฉันฉันจะได้รับคำเตือนต่อไปนี้: คำเตือน: MyForm …

359 javascript  node.js  reactjs  react-state 

ฉันอ่านเอกสารสำหรับห้องสมุด Redux และมันมีตัวอย่างนี้: นอกเหนือจากการอ่านสถานะแล้วส่วนประกอบคอนเทนเนอร์ยังสามารถส่งการกระทำได้ ในทำนองเดียวกันคุณสามารถกำหนดฟังก์ชั่นที่เรียกmapDispatchToProps()ว่ารับdispatch()วิธีการและส่งกลับอุปกรณ์ประกอบฉากโทรกลับที่คุณต้องการฉีดเข้าไปในองค์ประกอบการนำเสนอ จริง ๆ แล้วมันไม่มีเหตุผล ทำไมคุณต้องการmapDispatchToPropsเมื่อคุณมีmapStateToProps? พวกเขายังให้ตัวอย่างโค้ดที่มีประโยชน์นี้: const mapDispatchToProps = (dispatch) => { return { onTodoClick: (id) => { dispatch(toggleTodo(id)) } } } ใครช่วยอธิบายในแง่ของคนธรรมดาได้ว่าฟังก์ชั่นนี้คืออะไรและทำไมมันถึงมีประโยชน์?

358 reactjs  redux  react-redux 

โครงสร้างของฉันมีลักษณะดังนี้: Component 1 - |- Component 2 - - |- Component 4 - - - |- Component 5 Component 3 องค์ประกอบที่ 3 ควรแสดงข้อมูลบางอย่างขึ้นอยู่กับสถานะขององค์ประกอบที่ 5 เนื่องจากอุปกรณ์ประกอบฉากไม่มีการเปลี่ยนแปลงฉันจึงไม่สามารถบันทึกสถานะไว้ในองค์ประกอบที่ 1 และส่งต่อได้ใช่ไหม และใช่ฉันได้อ่านเกี่ยวกับการเปลี่ยนสี แต่ไม่ต้องการใช้ ฉันหวังว่ามันเป็นไปได้ที่จะแก้มันด้วยการตอบสนอง ฉันผิดหรือเปล่า?

351 javascript  reactjs  web-deployment 

ฉันใหม่สำหรับ ReactJS และ JSX และฉันมีปัญหาเล็กน้อยกับรหัสด้านล่าง ฉันกำลังพยายามเพิ่มคลาสหลายคลาสให้กับclassNameแอตทริบิวต์ของแต่ละรายการli: <li key={index} className={activeClass, data.class, "main-class"}></li> องค์ประกอบ React ของฉันคือ: var AccountMainMenu = React.createClass({ getInitialState: function() { return { focused: 0 }; }, clicked: function(index) { this.setState({ focused: index }); }, render: function() { var self = this; var accountMenuData = [ { name: "My Account", …

348 javascript  css  reactjs  ecmascript-6 

ฉันได้สร้างโครงการ React เปล่าโดยใช้คำสั่ง: npx create-react-appบน npm v7.0.7 และ Node v15.0.1 ติดตั้ง: ตอบสนอง v17.0.1 โหนด -sass v5.0.0 จากนั้นฉันพยายามนำเข้าไฟล์. scss เปล่าไปยังส่วนประกอบของแอพ: App.js import './App.scss' function App() { return ( <div className="App"> App </div> ); } export default App; โยนข้อผิดพลาด: Failed to compile. ./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/s ass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss) Error: Node Sass version 5.0.0 is incompatible …

338 reactjs  webpack  create-react-app  node-sass  sass-loader 

ในฟังก์ชั่นการเรนเดอร์องค์ประกอบของฉันฉันมี: render() { const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => { return (<li onClick={this.onItemClick.bind(this, item)} key={item}>{item}</li>); }); return ( <div> ... <ul> {items} </ul> ... </div> ); } ทุกอย่างแสดงผลได้ดีอย่างไรก็ตามเมื่อคลิก<li>องค์ประกอบที่ฉันได้รับข้อผิดพลาดต่อไปนี้: ข้อผิดพลาดที่ไม่ได้แปล: การละเมิดที่ไม่คงที่: วัตถุไม่ถูกต้องในฐานะเด็ก React (พบ: วัตถุที่มีคีย์ {dispatchConfig, dispatchMarker, nativeEvent, เป้าหมาย, currentTarget ชนิด, เหตุการณ์, ฟองสบู่, ยกเลิกได้, timeStamp, defaultPrevented, isTrusted, view …

337 javascript  reactjs 

ฉันเพิ่งเปลี่ยนreact-routerจาก v3 เป็น v4 แต่ผมไม่แน่ใจว่าจะเลื่อนโปรแกรมในฟังก์ชั่นสมาชิกของ Componentนั่นคือในhandleClick()ฟังก์ชั่นที่ฉันต้องการนำทาง/path/some/whereหลังจากประมวลผลข้อมูล ฉันเคยทำโดย: import { browserHistory } from 'react-router' browserHistory.push('/path/some/where') แต่ฉันไม่พบอินเทอร์เฟซดังกล่าวใน v4 ฉันจะนำทางโดยใช้ v4 ได้อย่างไร

336 reactjs  ecmascript-6  react-router-v4 

ฉันต้องการแสดงและซ่อนกลุ่มปุ่มตามเงื่อนไขโดยขึ้นอยู่กับสิ่งที่ส่งผ่านจากองค์ประกอบหลักซึ่งมีลักษณะดังนี้: <TopicNav showBulkActions={this.__hasMultipleSelected} /> .... __hasMultipleSelected: function() { return false; //return true or false depending on data } .... var TopicNav = React.createClass({ render: function() { return ( <div className="row"> <div className="col-lg-6"> <div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}"> <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Bulk Actions <span …

334 javascript  css  twitter-bootstrap-3  reactjs  class-attributes 

คำเตือน: ส่วนประกอบกำลังเปลี่ยนอินพุตที่ไม่ได้ควบคุมของข้อความประเภทที่จะควบคุม องค์ประกอบอินพุตไม่ควรเปลี่ยนจากไม่มีการควบคุมเป็นการควบคุม (หรือในทางกลับกัน) ตัดสินใจเลือกระหว่างการใช้อิลิเมนต์อินพุตที่ควบคุมหรือไม่มีการควบคุมสำหรับอายุการใช้งานของส่วนประกอบ * ต่อไปนี้เป็นรหัสของฉัน: constructor(props) { super(props); this.state = { fields: {}, errors: {} } this.onSubmit = this.onSubmit.bind(this); } .... onChange(field, e){ let fields = this.state.fields; fields[field] = e.target.value; this.setState({fields}); } .... render() { return( <div className="form-group"> <input value={this.state.fields["name"]} onChange={this.onChange.bind(this, "name")} className="form-control" type="text" refs="name" placeholder="Name *" /> …

331 javascript  reactjs 

ฉันกำลังอ่านส่วนของฟอร์มreactjsเอกสารและลองใช้รหัสนี้เพื่อสาธิตonChangeการใช้งาน ( JSBIN ) var React= require('react'); var ControlledForm= React.createClass({ getInitialState: function() { return { value: "initial value" }; }, handleChange: function(event) { console.log(this.state.value); this.setState({value: event.target.value}); console.log(this.state.value); }, render: function() { return ( <input type="text" value={this.state.value} onChange={this.handleChange}/> ); } }); React.render( <ControlledForm/>, document.getElementById('mount') ); เมื่อฉันอัปเดต<input/>ค่าในเบราว์เซอร์ที่สองconsole.logภายในการhandleChangeโทรกลับพิมพ์เหมือนvalueครั้งแรกconsole.logทำไมฉันไม่เห็นผลลัพธ์this.setState({value: event.target.value})ในขอบเขตของการhandleChangeโทรกลับ

326 javascript  reactjs  react-jsx 

ฉันเพิ่งเริ่มต้นกับ ReactJS และฉันติดอยู่กับปัญหาที่ฉันมี แอปพลิเคชันของฉันเป็นรายการที่มีตัวกรองและปุ่มเพื่อเปลี่ยนเค้าโครง ในขณะที่ฉันใช้สามองค์ประกอบ<list />, < Filters />และ<TopBar />ตอนนี้เห็นได้ชัดว่าเมื่อฉันเปลี่ยนการตั้งค่าใน< Filters />ฉันต้องการที่จะเรียกวิธีการบางอย่างในการ<list />ที่จะปรับปรุงมุมมองของฉัน ฉันจะทำให้ 3 องค์ประกอบเหล่านี้มีปฏิสัมพันธ์ซึ่งกันและกันหรือฉันต้องการแบบจำลองข้อมูลส่วนกลางบางประเภทที่ฉันสามารถเปลี่ยนแปลงได้อย่างไร

321 javascript  reactjs