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

ฉันใช้ reactjs เมื่อฉันเรียกใช้รหัสด้านล่างเบราว์เซอร์กล่าวว่า: Uncaught TypeError: Super expression ต้องเป็น Null หรือฟังก์ชั่นโดยไม่ได้กำหนด คำแนะนำใด ๆ ที่เป็นสิ่งที่ผิดจะได้รับการชื่นชม บรรทัดแรกที่ใช้ในการรวบรวมรหัส: browserify -t reactify -t babelify examples/temp.jsx -o examples/public/app.js และรหัส: var React = require('react'); class HelloMessage extends React.Component { render() { return <div>Hello </div>; } } ปรับปรุง: หลังจากการเผาไหม้ในขุมนรกเป็นเวลาสามวันกับปัญหานี้ฉันพบว่าฉันไม่ได้ใช้รุ่นล่าสุดของการตอบสนอง ติดตั้งทั่วโลก: sudo npm install -g react@0.13.2 ติดตั้งในเครื่อง: npm install …

256 reactjs  ecmascript-6 

ใน React (เฟรมเวิร์กของ Facebook) ฉันต้องแสดงองค์ประกอบป้ายกำกับที่ผูกไว้กับการป้อนข้อความโดยใช้forแอตทริบิวต์มาตรฐาน เช่นใช้ JSX ต่อไปนี้: <label for="test">Test</label> <input type="text" id="test" /> อย่างไรก็ตามสิ่งนี้ทำให้ HTML ขาดforแอตทริบิวต์(และมาตรฐาน) ที่ต้องการ <label>Test</label> <input type="text" id="test"> ผมทำอะไรผิดหรือเปล่า?

250 reactjs  label 

แก้ไข: นี่คือสิ่งซ้ำซ้อนดูที่นี่ ฉันไม่พบตัวอย่างใด ๆ ของการใช้ชื่อคีย์แบบไดนามิกเมื่อตั้งค่าสถานะ นี่คือสิ่งที่ฉันต้องการจะทำ: inputChangeHandler : function (event) { this.setState( { event.target.id : event.target.value } ); }, โดยที่ event.target.id ใช้เป็นรหัสสถานะที่จะอัพเดท สิ่งนี้เป็นไปไม่ได้ในการตอบโต้?

248 javascript  reactjs  computed-properties 

มีวิธีการใช้ proptypes ในตัวเพื่อให้แน่ใจว่าอาร์เรย์ของวัตถุที่ถูกส่งผ่านไปยังองค์ประกอบเป็นอาร์เรย์ของวัตถุที่มีรูปร่างเฉพาะหรือไม่? อาจจะเป็นเช่นนี้? annotationRanges: PropTypes.array(PropTypes.shape({ start: PropTypes.number.isRequired, end: PropTypes.number.isRequired, })), ฉันขาดสิ่งที่เห็นได้ชัดที่สุดที่นี่หรือไม่? ดูเหมือนว่าสิ่งนี้จะเป็นที่ต้องการอย่างสูง

245 arrays  reactjs  react-proptypes 

ฉันมีส่วนประกอบที่รับเสาสำหรับขนาดของมัน เสาสามารถเป็นได้ทั้งสตริงหรืออดีตจำนวน: หรือ"LARGE"17 ฉันสามารถให้ React.PropTypes รู้ได้หรือไม่ว่าการตรวจสอบนี้เป็นแบบใดแบบหนึ่งหรือแบบอื่นในการตรวจสอบความถูกต้องของ propTypes หากฉันไม่ได้ระบุประเภทฉันจะได้รับคำเตือน: prop type `size` is invalid; it must be a function, usually from React.PropTypes. MyComponent.propTypes = { size: React.PropTypes }

244 reactjs  react-proptypes 

ปิด คำถามนี้เป็นคำถามความคิดเห็นตาม ไม่ยอมรับคำตอบในขณะนี้ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้สามารถตอบข้อเท็จจริงและการอ้างอิงได้โดยแก้ไขโพสต์นี้ ปิดเมื่อปีที่แล้ว ปรับปรุงคำถามนี้ ฉันเพิ่งค้นพบRedux ทุกอย่างดูดี มี downside, gotcha หรือประนีประนอมของการใช้ Redux มากกว่า Flux หรือไม่? ขอบคุณ

243 reactjs  redux  flux  reactjs-flux 

ฉันจะรวมองค์ประกอบไว้ใน JSX ได้อย่างไร นี่คือตัวอย่างการใช้แบนเนอร์ที่ควรอยู่ในส่วนประกอบหากผ่านไปแล้วสิ่งที่ฉันต้องการหลีกเลี่ยงคือการทำซ้ำแท็ก HTML ในคำสั่ง if render: function () { var banner; if (this.state.banner) { banner = <div id="banner">{this.state.banner}</div>; } else { banner = ????? } return ( <div id="page"> {banner} <div id="other-content"> blah blah blah... </div> </div> ); }

229 javascript  reactjs  react-jsx 

ฉันกำลังเรียนรู้ Redux ด้วย React และสะดุดกับรหัสนี้ ฉันไม่แน่ใจว่าเป็นเฉพาะReduxหรือไม่ แต่ฉันได้เห็นข้อมูลโค้ดต่อไปนี้ในหนึ่งในตัวอย่าง @connect((state) => { return { key: state.a.b }; }) ในขณะที่การทำงานของconnectตรงไปตรงสวย แต่ฉันไม่เข้าใจก่อน@ connectมันไม่ได้เป็นโอเปอเรเตอร์ JavaScript หากฉันไม่ผิด บางคนสามารถอธิบายได้ว่าอะไรคือสิ่งนี้และทำไมจึงใช้ ปรับปรุง: อันที่จริงแล้วมันเป็นส่วนหนึ่งreact-reduxที่ใช้เชื่อมต่อส่วนประกอบ React เข้ากับ Redux store

226 javascript  reactjs  decorator  redux 

เอกสารตอบโต้อย่างเป็นทางการระบุว่า " React.PureComponentเป็นshouldComponentUpdate()เพียงการเปรียบเทียบวัตถุที่ตื้นเท่านั้น" และให้คำแนะนำในกรณีนี้หากรัฐ "ลึก" ป.ร. ให้ไว้ ณ นี้มีเหตุผลใดทำไมหนึ่งควรจะชอบReact.PureComponentเมื่อสร้างส่วนประกอบ React? คำถาม : มีผลกระทบต่อประสิทธิภาพการใช้งานReact.Componentที่เราอาจพิจารณาใช้React.PureComponentหรือไม่? ฉันเดา shouldComponentUpdate()ว่าจะPureComponentทำการเปรียบเทียบที่ตื้นเท่านั้น หากเป็นกรณีนี้จะไม่สามารถใช้วิธีการดังกล่าวเพื่อการเปรียบเทียบที่ลึกกว่านี้ได้? "นอกจากนี้React.PureComponent's shouldComponentUpdate()ข้ามประคับประคองการปรับปรุงสำหรับทรีย่อยองค์ประกอบทั้ง" - นี้ไม่ได้หมายความว่าการเปลี่ยนแปลง prop จะถูกละเลย? คำถามเกิดขึ้นจากการอ่านในบล็อกขนาดกลางนี้ถ้ามันช่วยได้

224 reactjs  state 

ฉันพยายามที่จะเข้าใจวิธีการเชื่อมต่อของ react-redux และฟังก์ชั่นที่ใช้เป็นพารามิเตอร์ mapStateToProps()โดยเฉพาะอย่างยิ่ง วิธีที่ฉันเข้าใจมันมูลค่าส่งคืนของmapStateToPropsจะเป็นวัตถุที่ได้มาจากสถานะ (ตามที่อาศัยอยู่ในร้านค้า) ซึ่งจะมีการส่งคีย์ไปยังองค์ประกอบเป้าหมายของคุณ ซึ่งหมายความว่าสถานะที่ใช้งานโดยองค์ประกอบเป้าหมายของคุณสามารถมีโครงสร้างที่แตกต่างจากรัฐในขณะที่เก็บไว้ในร้านค้าของคุณ ถาม: ตกลงไหม ถาม: นี่เป็นสิ่งที่คาดหวังหรือไม่ ถาม: นี่เป็นรูปแบบต่อต้านหรือไม่

220 javascript  reactjs  redux  react-redux 

หลังจากเริ่มทำงานกับ React.js ดูเหมือนว่าpropsตั้งใจจะเป็นแบบคงที่ (ส่งผ่านมาจากองค์ประกอบหลัก) ในขณะที่stateการเปลี่ยนแปลงขึ้นอยู่กับเหตุการณ์ อย่างไรก็ตามฉันสังเกตเห็นในเอกสารอ้างอิงถึงcomponentWillReceivePropsซึ่งรวมถึงตัวอย่างนี้โดยเฉพาะ: componentWillReceiveProps: function(nextProps) { this.setState({ likesIncreasing: nextProps.likeCount > this.props.likeCount }); } นี้น่าจะบ่งบอกว่าคุณสมบัติสามารถเปลี่ยนในส่วนขึ้นอยู่กับการเปรียบเทียบของการnextProps this.propsฉันพลาดอะไรไป อุปกรณ์ประกอบฉากเปลี่ยนไปอย่างไรหรือฉันเข้าใจผิดว่าเรื่องนี้ถูกเรียกไปที่ใด?

217 javascript  reactjs  properties 

เราจะส่งพารามิเตอร์ด้วยthis.props.history.push('/page')ใน React-Router v4 ได้อย่างไร .then(response => { var r = this; if (response.status >= 200 && response.status < 300) { r.props.history.push('/template'); });

217 reactjs  react-router 

มีวิธีการส่งผ่านองค์ประกอบหนึ่งไปยังส่วนประกอบปฏิกิริยาอื่นหรือไม่? ฉันต้องการสร้างแบบจำลององค์ประกอบการตอบสนองและส่งผ่านองค์ประกอบการตอบสนองอื่นเพื่อแปลงเนื้อหานั้น แก้ไข: นี่คือ codepen reactJS แสดงสิ่งที่ฉันพยายามทำ http://codepen.io/aallbrig/pen/bEhjo HTML <div id="my-component"> <p>Hi!</p> </div> ReactJS /**@jsx React.DOM*/ var BasicTransclusion = React.createClass({ render: function() { // Below 'Added title' should be the child content of <p>Hi!</p> return ( <div> <p> Added title </p> {this.props.children} </div> ) } }); React.renderComponent(BasicTransclusion(), document.getElementById('my-component'));

216 javascript  reactjs 

ฉันมีโครงสร้างต่อไปนี้: FormEditor- เก็บ FieldEditor หลายอัน FieldEditor- แก้ไขฟิลด์ของแบบฟอร์มและบันทึกค่าต่าง ๆ เกี่ยวกับมันในสถานะ เมื่อคลิกปุ่มภายใน FormEditor ฉันต้องการรวบรวมข้อมูลเกี่ยวกับฟิลด์จากFieldEditorส่วนประกอบทั้งหมดข้อมูลที่อยู่ในสถานะของพวกเขาและมีทั้งหมดภายใน FormEditor ฉันถือว่าการจัดเก็บข้อมูลเกี่ยวกับเขตข้อมูลนอกFieldEditorสถานะของและวางไว้ในFormEditorสถานะของแทน อย่างไรก็ตามนั่นจะต้องFormEditorฟังFieldEditorส่วนประกอบแต่ละอย่างเมื่อมีการเปลี่ยนแปลงและจัดเก็บข้อมูลในสถานะ ฉันไม่สามารถเข้าถึงสถานะของเด็กแทนได้หรือไม่ มันเหมาะไหม

215 javascript  reactjs 

ฉันจะทำให้onKeyPressกิจกรรมทำงานใน ReactJS ได้อย่างไร ควรแจ้งเตือนเมื่อenter (keyCode=13)มีการกด var Test = React.createClass({ add: function(event){ if(event.keyCode == 13){ alert('Adding....'); } }, render: function(){ return( <div> <input type="text" id="one" onKeyPress={this.add} /> </div> ); } }); React.render(<Test />, document.body);

215 javascript  reactjs  keypress  onkeypress