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

ฉันได้รับข้อผิดพลาดดังต่อไปนี้ Uncaught TypeError: ไม่สามารถอ่านคุณสมบัติ 'setState' ของที่ไม่ได้กำหนด แม้หลังจากการเชื่อมโยงเดลต้าในตัวสร้าง class Counter extends React.Component { constructor(props) { super(props); this.state = { count : 1 }; this.delta.bind(this); } delta() { this.setState({ count : this.state.count++ }); } render() { return ( <div> <h1>{this.state.count}</h1> <button onClick={this.delta}>+</button> </div> ); } }

316 javascript  reactjs 

ฉันมีโครงสร้างต่อไปนี้สำหรับแอปพลิเคชัน React.js ของฉันโดยใช้ React Router : var Dashboard = require('./Dashboard'); var Comments = require('./Comments'); var Index = React.createClass({ render: function () { return ( <div> <header>Some header</header> <RouteHandler /> </div> ); } }); var routes = ( <Route path="/" handler={Index}> <Route path="comments" handler={Comments}/> <DefaultRoute handler={Dashboard}/> </Route> ); ReactRouter.run(routes, function (Handler) …

315 javascript  properties  reactjs  react-router 

ฉันจะทำให้ React แสดงมุมมองใหม่ได้อย่างไรเมื่อมีการปรับขนาดหน้าต่างเบราว์เซอร์ พื้นหลัง ฉันมีบล็อกบางส่วนที่ฉันต้องการจัดวางแบบแยกทีละหน้า ผลลัพธ์ที่ได้จะเป็นรูปแบบ Pinterest ของ Ben Hollandแต่เขียนโดยใช้ React ไม่ใช่แค่ jQuery ฉันยังคงออกเดินทาง รหัส นี่คือแอพของฉัน: var MyApp = React.createClass({ //does the http get from the server loadBlocksFromServer: function() { $.ajax({ url: this.props.url, dataType: 'json', mimeType: 'textPlain', success: function(data) { this.setState({data: data.events}); }.bind(this) }); }, getInitialState: function() { return {data: …

313 javascript  reactjs  resize 

ฉันต้องการประกาศพา ธ ด้วยพารามิเตอร์พา ธ เผื่อเลือกดังนั้นเมื่อฉันเพิ่มเพจเพื่อทำสิ่งพิเศษ (เช่นกรอกข้อมูลบางส่วน): http: // localhost / app / path / to / page <= แสดงหน้า http: // localhost / app / เส้นทาง / ไปยัง / หน้า / pathParam <= แสดงหน้าด้วยข้อมูลบางส่วนตาม pathParam ในเราเตอร์ที่ตอบสนองของฉันฉันมีเส้นทางต่อไปนี้เพื่อสนับสนุนสองตัวเลือก (นี่คือตัวอย่างที่ง่าย): <Router history={history}> <Route path="/path" component={IndexPage}> <Route path="to/page" component={MyPage}/> <Route path="to/page/:pathParam" component={MyPage}/> </Route> </Router> …

306 javascript  reactjs  react-router  react-router-v4 

สิ่งที่อาจทำให้เกิดข้อผิดพลาดError: EACCES: permission denied, access '/usr/local/lib/node_modules'? npm ERR! path /usr/local/lib/node_modules npm ERR! code EACCES npm ERR! errno -13 npm ERR! syscall access npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules' npm ERR! { Error: EACCES: permission denied, access '/usr/local/lib/node_modules' npm ERR! errno: -13, npm ERR! code: 'EACCES', npm ERR! syscall: …

298 node.js  reactjs  npm  install 

เมื่อฉันพิมพ์create-react-app my-appคำสั่งใน terminal ของฉันก็จะปรากฏขึ้นในการทำงาน - การดาวน์โหลดห้องสมุดประสบความสำเร็จ ฯลฯ ตอนท้ายของกระบวนการว่า template was not providedแต่ฉันได้รับข้อความว่าเป็น อินพุต user@users-MacBook-Pro-2 Desktop% create-react-app my-app เอาท์พุต Creating a new React app in /Users/user/Desktop/my-app. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts... ..... nothing out of the ordinary here ..... ✨ Done in …

297 reactjs  create-react-app 

ไม่มีวิธีง่ายๆในการส่งเด็กpropsไปยังผู้ปกครองโดยใช้กิจกรรมใน React.js? var Child = React.createClass({ render: function() { <a onClick={this.props.onClick}>Click me</a> } }); var Parent = React.createClass({ onClick: function(event) { // event.component.props ?why is this not available? }, render: function() { <Child onClick={this.onClick} /> } }); ฉันรู้ว่าคุณสามารถใช้ส่วนประกอบที่ควบคุมได้เพื่อส่งผ่านค่าอินพุต แต่มันก็ดีที่จะผ่านชุดคิทพูนทั้งหมด บางครั้งองค์ประกอบย่อยมีชุดข้อมูลที่คุณไม่ต้องการค้นหา อาจมีวิธีผูกองค์ประกอบกับกิจกรรมหรือไม่ อัปเดต - 9/1/2558 หลังจากใช้ React มานานกว่าหนึ่งปีและกระตุ้นโดยคำตอบของ Sebastien Lorber ฉันได้สรุปว่าการส่งผ่านองค์ประกอบของเด็กเป็นข้อโต้แย้งเกี่ยวกับหน้าที่ของผู้ปกครองไม่ใช่ความจริงในทางของ …

295 javascript  reactjs 

ใน JSX คุณจะอ้างอิงค่าจากpropsจากภายในค่าแอตทริบิวต์ที่ยกมาได้อย่างไร ตัวอย่างเช่น: <img className="image" src="images/{this.props.image}" /> ผลลัพธ์ HTML ที่ได้คือ: <img class="image" src="images/{this.props.image}">

295 javascript  reactjs  react-props 

ฉันพยายามเข้าถึงรูปภาพนิ่งเพื่อใช้ภายในbackgroundImageคุณสมบัติแบบอินไลน์ภายใน React น่าเสียดายที่ฉันแห้งมากในการทำเช่นนี้ โดยทั่วไปฉันคิดว่าคุณเพิ่งทำดังนี้: import Background from '../images/background_image.png'; var sectionStyle = { width: "100%", height: "400px", backgroundImage: "url(" + { Background } + ")" }; class Section extends Component { render() { return ( <section style={ sectionStyle }> </section> ); } } ใช้งานได้กับ<img>แท็ก บางคนสามารถอธิบายความแตกต่างระหว่างทั้งสองได้หรือไม่ ตัวอย่าง: <img src={ Background } /> …

290 javascript  reactjs 

ฉันใหม่ใน React และฉันพยายามเขียนแอปที่ทำงานกับ API ฉันได้รับข้อผิดพลาดนี้: TypeError: this.setState ไม่ใช่ฟังก์ชัน เมื่อฉันพยายามจัดการกับการตอบสนองของ API ฉันคิดว่ามันผิดปกติกับการเชื่อมโยงนี้ แต่ฉันไม่สามารถหาวิธีแก้ไขได้ นี่คือรหัสของส่วนประกอบของฉัน: var AppMain = React.createClass({ getInitialState: function() { return{ FirstName: " " }; }, componentDidMount:function(){ VK.init(function(){ console.info("API initialisation successful"); VK.api('users.get',{fields: 'photo_50'},function(data){ if(data.response){ this.setState({ //the error happens here FirstName: data.response[0].first_name }); console.info(this.state.FirstName); } }); }, function(){ console.info("API initialisation failed"); …

288 javascript  reactjs 

รับองค์ประกอบง่าย ๆ ที่ทำให้ลูก ๆ ของมัน: class ContainerComponent extends Component { static propTypes = { children: PropTypes.object.isRequired, } render() { return ( <div> {this.props.children} </div> ); } } export default ContainerComponent; คำถาม: เสาประเภทของเสาควรเป็นอย่างไร? เมื่อฉันตั้งเป็นวัตถุมันล้มเหลวเมื่อฉันใช้องค์ประกอบที่มีลูกหลายคน: <ContainerComponent> <div>1</div> <div>2</div> </ContainerComponent> คำเตือน: ไม่ประเภทเสา: เสาที่ไม่ถูกต้องchildrenจากประเภทarray จ่ายให้กับคาดว่าContainerComponentobject ถ้าฉันตั้งค่าเป็นอาร์เรย์มันจะล้มเหลวถ้าฉันให้ลูกเพียงคนเดียวคือ: <ContainerComponent> <div>1</div> </ContainerComponent> คำเตือน: โพรโทคอลที่ล้มเหลว: โพรไฟล์ลูกไม่ถูกต้องของออบเจ็กต์ประเภทที่จัดหาให้กับ ContainerComponent, อาร์เรย์ที่คาดไว้ …

265 reactjs  jsx  react-proptypes 

เป็นไปได้หรือไม่ที่จะอัพเดทคุณสมบัติของวัตถุด้วยsetState? สิ่งที่ต้องการ: this.state = { jasper: { name: 'jasper', age: 28 }, } ฉันเหนื่อย: this.setState({jasper.name: 'someOtherName'}); และนี่: this.setState({jasper: {name: 'someothername'}}) ผลลัพธ์แรกในข้อผิดพลาดทางไวยากรณ์และข้อที่สองไม่ทำอะไรเลย ความคิดใด ๆ

265 reactjs  state 

ฉันมีปัญหาที่ค่อนข้างตรงไปตรงมาในการพยายามเพิ่มสคริปต์แบบอินไลน์ให้กับองค์ประกอบ React สิ่งที่ฉันมี: 'use strict'; import '../../styles/pages/people.scss'; import React, { Component } from 'react'; import DocumentTitle from 'react-document-title'; import { prefix } from '../../core/util'; export default class extends Component { render() { return ( <DocumentTitle title="People"> <article className={[prefix('people'), prefix('people', 'index')].join(' ')}> <h1 className="tk-brandon-grotesque">People</h1> <script src="https://use.typekit.net/foobar.js"></script> <script dangerouslySetInnerHTML={{__html: 'try{Typekit.load({ async: true …

264 javascript  reactjs  ecmascript-6  react-jsx 

ฉันกำลังดิ้นรนกับเส้นทางการทำรังโดยใช้ react router v4 ตัวอย่างที่ใกล้เคียงที่สุดคือการตั้งค่าเส้นทางใน เอกสารตอบสนอง-Router v4 ฉันต้องการแยกแอปออกเป็นสองส่วน ส่วนหน้าและพื้นที่ของผู้ดูแลระบบ ฉันกำลังคิดเกี่ยวกับสิ่งนี้: <Match pattern="/" component={Frontpage}> <Match pattern="/home" component={HomePage} /> <Match pattern="/about" component={AboutPage} /> </Match> <Match pattern="/admin" component={Backend}> <Match pattern="/home" component={Dashboard} /> <Match pattern="/users" component={UserPage} /> </Match> <Miss component={NotFoundPage} /> ส่วนหน้ามีเลย์เอาต์และสไตล์ที่แตกต่างจากพื้นที่ของผู้ดูแลระบบ ดังนั้นในหน้าแรกเส้นทางบ้านประมาณหนึ่งเส้นทางควรเป็นเส้นทางลูก / homeควรแสดงผลในองค์ประกอบ Frontpage และ/ admin / homeควรแสดงผลภายในองค์ประกอบ Backend ฉันลองใช้รูปแบบต่าง ๆ แต่ฉันมักจะจบลงด้วยการไม่กดปุ่ม …

261 javascript  reactjs  nested  react-router  react-router-v4 

ฉันกำลังสร้างแอพที่ผู้ใช้สามารถออกแบบฟอร์มของตัวเองได้ เช่นระบุชื่อของเขตข้อมูลและรายละเอียดของคอลัมน์อื่น ๆ ที่ควรจะรวม องค์ประกอบที่สามารถใช้ได้เป็น JSFiddle ที่นี่ สถานะเริ่มต้นของฉันมีลักษณะเช่นนี้: var DynamicForm = React.createClass({ getInitialState: function() { var items = {}; items[1] = { name: 'field 1', populate_at: 'web_start', same_as: 'customer_name', autocomplete_from: 'customer_name', title: '' }; items[2] = { name: 'field 2', populate_at: 'web_end', same_as: 'user_name', autocomplete_from: 'user_name', title: '' }; return …

259 javascript  reactjs  state