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

เมื่อมันเป็นสิ่งสำคัญที่จะผ่านpropsไปsuper()และทำไม? class MyComponent extends React.Component { constructor(props) { super(); // or super(props) ? } }

531 reactjs  ecmascript-6 

ฉันได้รับข้อผิดพลาดนี้: ข้อผิดพลาดที่ไม่คาดคิด: การละเมิดที่ไม่คงที่: ประเภทองค์ประกอบไม่ถูกต้อง: คาดว่าสตริง (สำหรับคอมโพเนนต์ในตัว) หรือคลาส / ฟังก์ชั่น (สำหรับส่วนประกอบคอมโพสิต) แต่ได้รับ: วัตถุ นี่คือรหัสของฉัน: var React = require('react') var ReactDOM = require('react-dom') var Router = require('react-router') var Route = Router.Route var Link = Router.Link var App = React.createClass({ render() { return ( <div> <h1>App</h1> <ul> <li><Link to="/about">About</Link></li> </ul> </div> ) } …

528 reactjs  react-router 

ฉันทราบว่าคุณสามารถระบุสไตล์ภายในคลาส React เช่นนี้: var MyDiv = React.createClass({ render: function() { var style = { color: 'white', fontSize: 200 }; return <div style={style}> Have a good and productive day! </div>; } }); ฉันควรตั้งเป้าหมายที่จะจัดแต่งทรงผมด้วยวิธีนี้และไม่มีสไตล์ตามที่ระบุไว้ในไฟล์ CSS ของฉันหรือไม่? หรือฉันควรหลีกเลี่ยงรูปแบบอินไลน์อย่างสมบูรณ์? ดูเหมือนแปลกและยุ่งเหยิงที่จะทำทั้งสองอย่างเล็กน้อย - สถานที่สองแห่งจะต้องได้รับการตรวจสอบเมื่อปรับแต่งสไตล์

512 css  reactjs  inline-styles  react-jsx 

React แสดงองค์ประกอบทั้งหมดและส่วนประกอบย่อยใหม่ทุกครั้งที่setStateเรียกใช้หรือไม่ ถ้าเป็นเช่นนั้นทำไม ฉันคิดว่าความคิดคือการตอบสนองเพียงเล็กน้อยตามที่ต้องการ - เมื่อรัฐเปลี่ยน ในตัวอย่างง่ายๆดังต่อไปนี้คลาสทั้งสองจะแสดงอีกครั้งเมื่อมีการคลิกข้อความแม้ว่าข้อเท็จจริงที่ว่ารัฐจะไม่เปลี่ยนแปลงในการคลิกที่ตามมาเนื่องจากตัวจัดการ onClick ตั้งstateค่าเป็นค่าเดียวกันเสมอ: this.setState({'test':'me'}); ฉันคาดว่าการแสดงผลจะเกิดขึ้นก็ต่อเมื่อstateข้อมูลมีการเปลี่ยนแปลง นี่คือตัวอย่างรหัสในฐานะ JS Fiddleและตัวอย่างข้อมูลในตัว: var TimeInChild = React.createClass({ render: function() { var t = new Date().getTime(); return ( <p>Time in child:{t}</p> ); } }); var Main = React.createClass({ onTest: function() { this.setState({'test':'me'}); }, render: function() { var currentTime = new …

503 javascript  reactjs 

คุณจะทำการ debounce ใน React.js ได้อย่างไร ฉันต้องการ debounce handleOnChange ฉันลองด้วยdebounce(this.handleOnChange, 200)แต่ใช้ไม่ได้ function debounce(fn, delay) { var timer = null; return function() { var context = this, args = arguments; clearTimeout(timer); timer = setTimeout(function() { fn.apply(context, args); }, delay); }; } var SearchBox = React.createClass({ render: function() { return <input type="search" name="p" …

496 javascript  reactjs 

มีจำนวนมากของการพูดคุยเกี่ยวกับเด็กล่าสุดในเมือง Redux คือตอนนี้Redux-วีรชน / Redux-เทพนิยาย มันใช้ฟังก์ชั่นเครื่องกำเนิดสำหรับการฟังการกระทำ ก่อนที่ฉันจะพันหัวฉันอยากรู้ว่าข้อดี / ข้อเสียของการใช้redux-sagaแทนที่จะเป็นวิธีการด้านล่างที่ฉันใช้redux-thunkกับ async / รอ ส่วนประกอบอาจมีลักษณะเช่นนี้ส่งการกระทำเหมือนปกติ import { login } from 'redux/auth'; class LoginForm extends Component { onClick(e) { e.preventDefault(); const { user, pass } = this.refs; this.props.dispatch(login(user.value, pass.value)); } render() { return (<div> <input type="text" ref="user" /> <input type="password" ref="pass" /> <button …

488 javascript  reactjs  redux  redux-thunk  redux-saga 

ฉันมีสององค์ประกอบ องค์ประกอบหลัก องค์ประกอบลูก ฉันพยายามเรียกวิธีการของเด็กจากผู้ปกครองฉันลองวิธีนี้ แต่ไม่สามารถรับผลได้ class Parent extends Component { render() { return ( <Child> <button onClick={Child.getAlert()}>Click</button> </Child> ); } } class Child extends Component { getAlert() { alert('clicked'); } render() { return ( <h1 ref="hello">Hello</h1> ); } } มีวิธีที่จะเรียกวิธีการของเด็กจากผู้ปกครองหรือไม่? หมายเหตุ: องค์ประกอบลูกและผู้ปกครองอยู่ในสองไฟล์ที่แตกต่างกัน

474 javascript  reactjs 

ฉันกำลังพยายามตั้งค่าReact.jsแอพของฉันเพื่อให้แสดงผลเฉพาะเมื่อตัวแปรที่ฉันตั้งไว้trueเท่านั้น วิธีการตั้งค่าฟังก์ชั่นการเรนเดอร์ของฉัน: render: function() { var text = this.state.submitted ? 'Thank you! Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:'; var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {}; return ( <div> if(this.state.submitted==false) { <input type="email" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} …

467 javascript  reactjs  render 

ฉันต้องการเพิ่มองค์ประกอบไปยังจุดสิ้นสุดของstateอาร์เรย์นี่เป็นวิธีที่ถูกต้องหรือไม่ this.state.arrayvar.push(newelement); this.setState({arrayvar:this.state.arrayvar}); ฉันกังวลว่าการแก้ไขอาร์เรย์ในสถานที่pushอาจทำให้เกิดปัญหา - ปลอดภัยหรือไม่ ทางเลือกในการทำสำเนาของอาร์เรย์และsetStateดูเหมือนว่าสิ้นเปลือง

416 javascript  reactjs 

ฉันจะกำหนดเส้นทางในไฟล์ route.jsx ของฉันเพื่อจับ__firebase_request_keyค่าพารามิเตอร์จาก URL ที่สร้างโดยกระบวนการลงชื่อเพียงครั้งเดียวของ Twitter หลังจากที่เปลี่ยนเส้นทางจากเซิร์ฟเวอร์ได้อย่างไร http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla ฉันพยายามกำหนดค่าเส้นทางต่อไปนี้ แต่:redirectParamไม่พบพารามิเตอร์ที่กล่าวถึง: <Router> <Route path="/" component={Main}> <Route path="signin" component={SignIn}> <Route path=":redirectParam" component={TwitterSsoButton} /> </Route> </Route> </Router>

412 reactjs  react-router 

ฉันกำลังมองหาวิธีการในการตรวจสอบหากมีเหตุการณ์เกิดขึ้นคลิกนอกขององค์ประกอบที่อธิบายไว้ในนี้บทความ jQuery nearby () ใช้เพื่อดูว่าเป้าหมายจากเหตุการณ์คลิกมีองค์ประกอบ dom เป็นหนึ่งในพาเรนต์หรือไม่ หากมีการแข่งขันเหตุการณ์คลิกเป็นของเด็ก ๆ คนหนึ่งและดังนั้นจึงไม่ถือว่าอยู่นอกองค์ประกอบ ดังนั้นในองค์ประกอบของฉันฉันต้องการแนบตัวจัดการการคลิกกับหน้าต่าง เมื่อผู้ควบคุมยิงฉันต้องเปรียบเทียบเป้าหมายกับลูกโดมขององค์ประกอบของฉัน เหตุการณ์คลิกมีคุณสมบัติเช่น "เส้นทาง" ซึ่งดูเหมือนว่าจะเก็บเส้นทาง dom ที่เหตุการณ์ได้เดินทาง ฉันไม่แน่ใจว่าจะเปรียบเทียบอะไรหรือจะสำรวจให้ดีที่สุดได้อย่างไรและฉันคิดว่าบางคนต้องใส่มันในฟังก์ชั่นยูทิลิตี้ที่ฉลาดอยู่แล้ว ... ไม่?

410 javascript  dom  reactjs 

ในส่วนประกอบ React สำหรับ<select>เมนูฉันต้องตั้งค่าแอselectedททริบิวในตัวเลือกที่สะท้อนถึงสถานะแอปพลิเคชัน ในrender()ที่optionStateถูกส่งผ่านจากเจ้าของรัฐเพื่อองค์ประกอบ SortMenu ค่าตัวเลือกจะถูกส่งผ่านเป็นpropsจาก JSON render: function() { var options = [], optionState = this.props.optionState; this.props.options.forEach(function(option) { var selected = (optionState === option.value) ? ' selected' : ''; options.push( <option value={option.value}{selected}>{option.label}</option> ); }); // pass {options} to the select menu jsx อย่างไรก็ตามที่ก่อให้เกิดข้อผิดพลาดทางไวยากรณ์ในการรวบรวม JSX การทำเช่นนี้เป็นการกำจัดข้อผิดพลาดทางไวยากรณ์ แต่เห็นได้ชัดว่าไม่ได้แก้ปัญหา: var selected = …

402 javascript  reactjs 

ฉันกำลังติดตามการสอนเกี่ยวกับเว็บไซต์ React Native อย่างเป็นทางการ ใช้สิ่งต่อไปนี้เพื่อสร้างโครงการของฉัน: react-native run-ios ฉันได้รับข้อผิดพลาด: Found Xcode project TestProject.xcodeproj xcrun: error: unable to find utility "instruments", not a developer tool or in PATH Command failed: xcrun instruments -s xcrun: error: unable to find utility "instruments", not a developer tool or in PATH แม้ว่าเมื่อฉันรันแอพจาก. xcodeproj ทุกอย่างก็ใช้ได้ดี ข้อเสนอแนะใด ๆ

394 javascript  ios  reactjs  react-native  ios-simulator 

ฉันกำลังพยายามจัดระเบียบสถานะของฉันโดยใช้คุณสมบัติที่ซ้อนกันเช่นนี้: this.state = { someProperty: { flag:true } } แต่การอัพเดทสถานะเช่นนี้ this.setState({ someProperty.flag: false }); ไม่ทำงาน สิ่งนี้สามารถทำได้อย่างถูกต้อง?

390 javascript  reactjs  ecmascript-6  setstate 

ฉันได้รับข้อผิดพลาดนี้หลังจากทำหน้าตัวอย่าง React เล็กน้อย ข้อผิดพลาดที่ไม่ได้แปล: การละเมิดที่ไม่เปลี่ยนแปลง: _registerComponent (... ): คอนเทนเนอร์เป้าหมายไม่ใช่องค์ประกอบ DOM นี่คือรหัสของฉัน: /** @jsx React.DOM */ 'use strict'; var React = require('react'); var App = React.createClass({ render() { return <h1>Yo</h1>; } }); React.renderComponent(<App />, document.body); HTML: <html> <head> <script src="/bundle.js"></script> </head> <body> </body> </html> สิ่งนี้หมายความว่า?

387 javascript  dom  reactjs