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

ฉันต้องการใช้เหตุการณ์ keyDown กับ div ใน React ฉันทำ: componentWillMount() { document.addEventListener("keydown", this.onKeyPressed.bind(this)); } componentWillUnmount() { document.removeEventListener("keydown", this.onKeyPressed.bind(this)); } onKeyPressed(e) { console.log(e.keyCode); } render() { let player = this.props.boards.dungeons[this.props.boards.currentBoard].player; return ( <div className="player" style={{ position: "absolute" }} onKeyDown={this.onKeyPressed} // not working > <div className="light-circle"> <div className="image-wrapper"> <img src={IMG_URL+player.img} /> </div> </div> </div> …

92 reactjs  events  keypress  keydown 

ตัวอย่างเช่นcodepen var InputBox = React.createClass({ render: function() { return ( <input className="mainInput" value='Some something'></input> ) } });

92 javascript  select  input  reactjs 

เอกสารสำคัญอันดับแรกของเอกสาร Redux คือ: สถานะของแอปพลิเคชันทั้งหมดของคุณจะถูกเก็บไว้ในโครงสร้างวัตถุภายในที่เก็บเดียว และที่จริงฉันก็คิดว่าฉันเข้าใจหลักการทั้งหมดดี แต่ตอนนี้ฉันสับสนว่าแอปพลิเคชันหมายถึงอะไร หากแอปพลิเคชันหมายถึงส่วนที่ซับซ้อนเพียงเล็กน้อยในเว็บไซต์และทำงานได้ในหน้าเดียวฉันเข้าใจ แต่ถ้าแอปพลิเคชันหมายถึงทั้งเว็บไซต์ล่ะ? ฉันควรใช้ LocalStorage หรือคุกกี้หรือบางสิ่งบางอย่างเพื่อเก็บสถานะต้นไม้หรือไม่ แต่ถ้าเบราว์เซอร์ไม่รองรับ LocalStorage ล่ะ? ฉันอยากรู้ว่านักพัฒนารักษาต้นไม้ของตนไว้อย่างไร! :)

92 reactjs  redux  flux 

ฉันมีองค์ประกอบช่องทำเครื่องหมาย TSX (JSX): <input type="checkbox" name={i.toString()} onClick={this.handleCheckboxClick} /> ด้วยความช่วยเหลือของรหัส VS ฉันรู้ว่าประเภทพารามิเตอร์อินพุตของthis.handleCheckboxClickคือMouseEvent<HTMLInputElement>. ดังนั้นฉันจึงใช้มันด้วย: private handleCheckboxClick(event: MouseEvent<HTMLInputElement>) { ... } จากนั้นฉันได้รับข้อผิดพลาดแจ้งว่า[ts] Type 'MouseEvent' is not generic.ดังที่แสดงในภาพด้านล่าง: เวอร์ชันของแพ็คเกจของฉัน: "@types/react": "^15.0.29", "@types/react-dom": "^15.5.0", "react": "^15.6.1", "react-dom": "^15.6.1", "typescript": "^2.3.4", ทำไมถึงเป็นเช่นนั้น?

92 reactjs  typescript  events  types  jsx 

ฉันใช้ ReactJS และส่วนหนึ่งของแอพของฉันต้องการ JSON ที่พิมพ์ออกมาได้สวย ฉันได้รับ JSON บางอย่างเช่น: { "foo": 1, "bar": 2 }และถ้าฉันเรียกใช้ผ่านJSON.stringify(obj, null, 4)ในคอนโซลเบราว์เซอร์มันค่อนข้างพิมพ์ออกมา แต่เมื่อฉันใช้มันในตัวอย่างการตอบสนองนี้: render: function() { var json = this.getStateFromFlux().json; return ( <div> <JsonSubmitter onSubmit={this.onSubmit} /> { JSON.stringify(json, null, 2) } </div> ); }, จะแสดงผล JSON "{ \"foo\" : 2, \"bar\": 2}\n"ขั้นต้นที่มีลักษณะเหมือน ฉันจะทำให้ตัวละครเหล่านั้นตีความอย่างถูกต้องได้อย่างไร? {

92 javascript  json  reactjs  flux 

การใช้เมธอด css-in-js เพื่อเพิ่มคลาสให้กับคอมโพเนนต์การตอบสนองฉันจะเพิ่มคอมโพเนนต์หลายรายการได้อย่างไร นี่คือตัวแปรคลาส: const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap' }, spacious: { padding: 10 }, }); นี่คือวิธีที่ฉันใช้: return ( <div className={ this.props.classes.container }> ข้างต้นใช้งานได้ แต่มีวิธีเพิ่มทั้งสองคลาสโดยไม่ใช้classNamesแพ็คเกจ npm หรือไม่? สิ่งที่ต้องการ: <div className={ this.props.classes.container + this.props.classes.spacious}>

92 css  reactjs  material-design  material-ui  jss 

ฉันคิดว่าชื่อมันบอกทุกอย่าง คำเตือนสีเหลืองจะปรากฏขึ้นทุกครั้งที่ฉันยกเลิกการต่อเชื่อมส่วนประกอบที่ยังคงดึงข้อมูล คอนโซล คำเตือน: ไม่สามารถเรียกsetState(หรือforceUpdate) บนส่วนประกอบที่ไม่ได้ต่อเชื่อม นี่ไม่ใช่การดำเนินการ แต่ ... ในการแก้ไขให้ยกเลิกการสมัครสมาชิกและงานอะซิงโครนัสทั้งหมดในcomponentWillUnmountเมธอด constructor(props){ super(props); this.state = { isLoading: true, dataSource: [{ name: 'loading...', id: 'loading', }] } } componentDidMount(){ return fetch('LINK HERE') .then((response) => response.json()) .then((responseJson) => { this.setState({ isLoading: false, dataSource: responseJson, }, function(){ }); }) .catch((error) =>{ console.error(error); }); }

92 reactjs 

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

92 reactjs 

ฉันมีปัญหากับเราเตอร์ react (ฉันใช้เวอร์ชัน ^ 4.0.0) นี่คือ index.js ของฉัน import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './index.css'; import { Router, Route, Link, browserHistory } from 'react-router'; ReactDOM.render( <Router history={browserHistory} > <Route path="/" component={App} /> </Router>, document.getElementById('root') ); App.js เป็นอะไรก็ได้ ฉันกำลังโพสต์สิ่งพื้นฐานที่นี่เพราะมันไม่ใช่ปัญหา (ฉันเชื่อว่า) import React, { Component …

92 javascript  json  reactjs  react-router 

ฉันใช้ Sublime Text เป็นโปรแกรมแก้ไขข้อความ มี jsFormat สำหรับจัดรูปแบบไฟล์ javascript แต่ฉันไม่พบไฟล์สำหรับ JSX พวกคุณจัดการกับการฟอร์แมต JSX อย่างไร?

91 reactjs  sublimetext  react-jsx 

ฉันดูเอกสารของ Facebook ที่ ( React.Component ) และกล่าวถึงวิธีcomponentWillMountเรียกใช้บนไคลเอนต์ / เซิร์ฟเวอร์ในขณะที่componentDidMountเรียกใช้บนไคลเอนต์เท่านั้น อะไรcomponentWillMountทำเพื่อให้เซิร์ฟเวอร์หรือไม่

91 reactjs 

ปกติฉันจะโพสต์สิ่งที่เกี่ยวข้องกับรหัสบน Stack แต่นี่เป็นคำถามมากกว่าว่าความคิดทั่วไปของชุมชนคืออะไร ดูเหมือนว่าจะมีผู้คนมากมายที่สนับสนุนการใช้ Redux กับ React เพื่อจัดการข้อมูล / สถานะ แต่ในขณะที่อ่านและเรียนรู้ทั้งสองอย่างฉันได้เจอบางสิ่งที่ดูไม่ถูกต้องนัก Redux ที่ด้านล่างของหน้านี้: http://redux.js.org/docs/basics/UsageWithReact.html (ผ่านร้านค้า) ขอแนะนำให้ใช้ "Magic" ของ React "Context" ทางเลือกหนึ่งคือการส่งต่อไปยังส่วนประกอบคอนเทนเนอร์ทุกชิ้น อย่างไรก็ตามมันน่าเบื่อเนื่องจากคุณต้องจัดเก็บสายไฟแม้กระทั่งผ่านส่วนประกอบในการนำเสนอเพียงเพราะมันเกิดขึ้นกับการแสดงผลคอนเทนเนอร์ที่อยู่ลึกลงไปในโครงสร้างส่วนประกอบ ตัวเลือกที่เราแนะนำคือใช้ส่วนประกอบ React Redux พิเศษที่เรียกว่าเพื่อทำให้ร้านค้าพร้อมใช้งานสำหรับส่วนประกอบคอนเทนเนอร์ทั้งหมด ... ตอบสนอง ในหน้า React Context ( https://facebook.github.io/react/docs/context.html ) จะมีคำเตือนที่ด้านบน: บริบทเป็นคุณลักษณะขั้นสูงและเป็นการทดลอง API มีแนวโน้มที่จะเปลี่ยนแปลงในอนาคต จากนั้นที่ด้านล่าง: เช่นเดียวกับที่หลีกเลี่ยงตัวแปรส่วนกลางได้ดีที่สุดเมื่อเขียนโค้ดที่ชัดเจนคุณควรหลีกเลี่ยงการใช้บริบทในกรณีส่วนใหญ่ ... อย่าใช้บริบทเพื่อส่งผ่านข้อมูลโมเดลของคุณผ่านส่วนประกอบ การเธรดข้อมูลของคุณผ่านโครงสร้างอย่างชัดเจนนั้นเข้าใจง่ายกว่ามาก ... ดังนั้น... Redux แนะนำให้ใช้คุณสมบัติ React 'Context' แทนที่จะส่งต่อstoreไปยังแต่ละองค์ประกอบผ่าน …

91 javascript  reactjs  redux 

ฉันพยายามสร้างแท็บในการตอบสนองเป็นหลัก แต่มีปัญหาบางอย่าง นี่คือไฟล์ page.jsx <RadioGroup> <Button title="A" /> <Button title="B" /> </RadioGroup> เมื่อคุณคลิกที่ปุ่ม A, ความต้องการส่วนประกอบ RadioGroup เพื่อยกเลิกการเลือกปุ่ม B "Selected" หมายถึง className จากสถานะหรือคุณสมบัติ นี่คือRadioGroup.jsx: module.exports = React.createClass({ onChange: function( e ) { // How to modify children properties here??? }, render: function() { return (<div onChange={this.onChange}> {this.props.children} </div>); } }); แหล่งที่มาของButton.jsxไม่สำคัญจริงๆมีปุ่มตัวเลือก …

91 reactjs 

ฉันสับสนเกี่ยวกับวิธีการเข้าถึงคุ้มค่าเมื่อใช้<input> mountนี่คือสิ่งที่ฉันได้รับจากการทดสอบของฉัน: it('cancels changes when user presses esc', done => { const wrapper = mount(<EditableText defaultValue="Hello" />); const input = wrapper.find('input'); console.log(input.render().attr('value')); input.simulate('focus'); done(); }); undefinedคอนโซลพิมพ์ออก แต่ถ้าฉันแก้ไขโค้ดเล็กน้อยมันใช้งานได้: it('cancels changes when user presses esc', done => { const wrapper = render(<EditableText defaultValue="Hello" />); const input = wrapper.find('input'); console.log(input.val()); input.simulate('focus'); done(); }); …

91 unit-testing  reactjs  enzyme 

อะไรคือรูปแบบที่แนะนำสำหรับการทำ setState บนพาเรนต์จากคอมโพเนนต์ลูก var Todos = React.createClass({ getInitialState: function() { return { todos: [ "I am done", "I am not done" ] } }, render: function() { var todos = this.state.todos.map(function(todo) { return <div>{todo}</div>; }); return <div> <h3>Todo(s)</h3> {todos} <TodoForm /> </div>; } }); var TodoForm = React.createClass({ getInitialState: function() …

91 reactjs