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

ฉันต้องการใช้ React เพื่อเพิ่มส่วนประกอบหลาย ๆ ครั้งตลอด DOM ซอนี้แสดงให้เห็นว่าฉันต้องการทำอะไรและมันไม่ได้ทำให้เกิดข้อผิดพลาดใด ๆ นี่คือรหัส: HTML: <div id="container"> <!-- This element's contents will be replaced with the first component. --> </div> <div id="second-container"> <!-- This element's contents will be replaced with the second component. --> </div> JS: var Hello = React.createClass({ render: function() { return <div>Hello …

107 reactjs 

ฉันมีปัญหาที่การเรนเดอร์สถานะทำให้เกิดปัญหา ui และได้รับการแนะนำให้อัปเดตเฉพาะค่าเฉพาะภายในตัวลดของฉันเพื่อลดจำนวนการแสดงผลบนเพจ นี่คือตัวอย่างของรัฐของฉัน { name: "some name", subtitle: "some subtitle", contents: [ {title: "some title", text: "some text"}, {title: "some other title", text: "some other text"} ] } และฉันกำลังอัปเดตเป็นแบบนี้ case 'SOME_ACTION': return { ...state, contents: action.payload } ที่action.payloadเป็นอาร์เรย์ทั้งหมดที่มีค่าใหม่ แต่ตอนนี้ฉันแค่ต้องอัปเดตข้อความของรายการที่สองในอาร์เรย์เนื้อหาและสิ่งนี้ไม่ได้ผล case 'SOME_ACTION': return { ...state, contents[1].text: action.payload } ที่action.payloadตอนนี้เป็นข้อความที่ฉันต้องการสำหรับการปรับปรุง

107 javascript  reactjs  redux 

ฉันมีองค์ประกอบ React ง่ายๆที่ฉันเชื่อมต่อ (การแมปอาร์เรย์ / สถานะอย่างง่ายทับ) เพื่อไม่ให้อ้างอิงบริบทของร้านค้าฉันต้องการวิธี "จัดส่ง" โดยตรงจากอุปกรณ์ประกอบฉาก ฉันเคยเห็นคนอื่นใช้แนวทางนี้ แต่ไม่สามารถเข้าถึงได้ด้วยเหตุผลบางประการ :) นี่คือเวอร์ชันของการพึ่งพา npm แต่ละรายการที่ฉันใช้อยู่ในปัจจุบัน "react": "0.14.3", "react-redux": "^4.0.0", "react-router": "1.0.1", "redux": "^3.0.4", "redux-thunk": "^1.0.2" นี่คือส่วนประกอบที่มีวิธีการเชื่อมต่อ class Users extends React.Component { render() { const { people } = this.props; return ( <div> <div>{this.props.children}</div> <button onClick={() => { this.props.dispatch({type: ActionTypes.ADD_USER, id: …

107 javascript  reactjs  redux 

ฉันมีองค์ประกอบหนึ่งที่จะแสดง Array of String รหัสมีลักษณะดังนี้: React.createClass({ render() { <div> this.props.data.map(t => <span>t</span>) </div> } }) มันทำงานได้ดีอย่างสมบูรณ์ เช่นถ้าผลแสดงผลในหน้าจะเป็นprops.data = ['tom', 'jason', 'chris']tomjasonchris จากนั้นฉันต้องการรวมชื่อทั้งหมดโดยใช้ลูกน้ำดังนั้นฉันจึงเปลี่ยนรหัสเป็น: this.props.data.map(t => <span>t</span>).join(', ') [Object], [Object], [Object]อย่างไรก็ตามผลที่แสดงผลเป็น ฉันไม่รู้วิธีตีความวัตถุให้กลายเป็นส่วนประกอบปฏิกิริยาที่จะแสดงผล ข้อเสนอแนะใด ๆ ?

107 reactjs 

โดยไม่ต้องใช้คลาสฉันจะใช้ PropTypes ในส่วนประกอบที่ไม่ระบุสถานะของการตอบสนองได้อย่างไร export const Header = (props) => ( <div>hi</div> )

107 javascript  reactjs  react-props  react-proptypes 

ฉันยังค่อนข้างใหม่ที่ React แต่ฉันค่อยๆบดไปเรื่อย ๆ และฉันเจอบางอย่างที่ฉันติดขัด ฉันกำลังพยายามสร้างองค์ประกอบ "ตัวจับเวลา" ใน React และพูดตามตรงว่าฉันไม่รู้ว่าฉันทำถูกต้อง (หรือมีประสิทธิภาพ) ในรหัสของฉันด้านล่างผมตั้งรัฐที่จะกลับวัตถุ{ currentCount: 10 }และได้รับ toying กับcomponentDidMount, componentWillUnmountและrenderและฉันเท่านั้นจะได้รับของรัฐที่จะ "นับถอยหลัง" 10-9 คำถามสองส่วน: ฉันผิดอะไร และมีวิธีที่มีประสิทธิภาพมากกว่าในการใช้ setTimeout (แทนที่จะใช้componentDidMount& componentWillUnmount) หรือไม่? ขอบคุณล่วงหน้า. import React from 'react'; var Clock = React.createClass({ getInitialState: function() { return { currentCount: 10 }; }, componentDidMount: function() { this.countdown = …

107 javascript  reactjs  settimeout  state 

ฉันเพิ่งเริ่มใช้ create-react-app กับ typescript create-react-app my-app --scripts-version=react-scripts-ts และคอนฟิกูเรชัน tslint.json ดีฟอลต์ไม่อนุญาต console.log () ฉันจะเปิดใช้งาน console.log ได้อย่างไร เอกสารสำหรับการนี้อยู่ที่ https://palantir.github.io/tslint/rules/no-console/ แต่พวกเขาไม่ได้บอกว่าจะวางบรรทัดนี้ไว้ที่ไหน: "no-console": [true, "log", "error"] ฉันค้นหาและพบไวยากรณ์ไฟล์การกำหนดค่า tslint.jsonนี้ดังนั้นฉันจึงลองสิ่งนี้: "rules": { "no-console": [true, "warning"] } ในความพยายามที่จะรับข้อความบันทึกที่เป็นเพียงคำเตือน แต่นั่นไม่ได้ผล ฉันได้แสดงความคิดเห็นเกี่ยวกับ console.log () บางบรรทัดที่ฉันมี แต่จะต้องการให้ทำได้ในอนาคต

107 reactjs  typescript  create-react-app  tslint 

ฉันแค่เขียนลงในการป้อนข้อความและในonChangeกรณีที่ฉันโทรsetStateไปดังนั้น React จะแสดงผล UI ของฉันอีกครั้ง ปัญหาคือการป้อนข้อความมักจะเสียโฟกัสดังนั้นฉันต้องโฟกัสอีกครั้งสำหรับแต่ละตัวอักษร: D var EditorContainer = React.createClass({ componentDidMount: function () { $(this.getDOMNode()).slimScroll({height: this.props.height, distance: '4px', size: '8px'}); }, componentDidUpdate: function () { console.log("zde"); $(this.getDOMNode()).slimScroll({destroy: true}).slimScroll({height: 'auto', distance: '4px', size: '8px'}); }, changeSelectedComponentName: function (e) { //this.props.editor.selectedComponent.name = $(e.target).val(); this.props.editor.forceUpdate(); }, render: function () { var style …

107 javascript  reactjs 

ผมได้สร้างเว็บไซต์ที่มีReact.jsและwebpack ฉันต้องการใช้แบบอักษรของ Googleในหน้าเว็บดังนั้นฉันจึงใส่ลิงค์ในส่วนนี้ Google Fonts <link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"> และตั้งค่า CSS body{ font-family: 'Bungee Inline', cursive; } อย่างไรก็ตามมันไม่ได้ผล ฉันจะแก้ปัญหานี้ได้อย่างไร?

107 reactjs  webpack  google-font-api 

คุณจะบรรลุเหตุการณ์โฮเวอร์หรือเหตุการณ์ที่ใช้งานอยู่ใน ReactJS ได้อย่างไรเมื่อคุณจัดแต่งทรงผมแบบอินไลน์ ฉันพบว่าวิธี onMouseEnter, onMouseLeave นั้นมีปัญหาดังนั้นหวังว่าจะมีวิธีอื่นในการทำเช่นนั้น โดยเฉพาะอย่างยิ่งหากคุณวางเมาส์เหนือส่วนประกอบอย่างรวดเร็วระบบจะลงทะเบียนเฉพาะเหตุการณ์ onMouseEnter เท่านั้น onMouseLeave ไม่เคยเริ่มทำงานและทำให้ไม่สามารถอัปเดตสถานะได้ ... ปล่อยให้ส่วนประกอบปรากฏราวกับว่ายังคงถูกวางเมาส์ไว้ ฉันสังเกตเห็นสิ่งเดียวกันนี้หากคุณลองเลียนแบบ css pseudo-class ": active" หากคุณคลิกเร็วจริงเฉพาะเหตุการณ์ onMouseDown เท่านั้นที่จะลงทะเบียน เหตุการณ์ onMouseUp จะถูกละเว้น ... ปล่อยให้คอมโพเนนต์ทำงานอยู่ นี่คือ JSFiddle ที่แสดงปัญหา: https://jsfiddle.net/y9swecyu/5/ วิดีโอของ JSFiddle ที่มีปัญหา: https://vid.me/ZJEO รหัส: var Hover = React.createClass({ getInitialState: function() { return { hover: false }; }, onMouseEnterHandler: …

107 javascript  css  reactjs  mouseevent  dom-events 

ฉันรู้ว่านี่เป็นคำถามพื้นฐาน แต่ฉันไม่มีโชคในการหาคำตอบจากที่อื่น คือstore.dispatchในการซิงโครหรือไม่ตรงกันRedux? ในกรณีที่เป็นแบบอะซิงโครนัสมีความเป็นไปได้ที่จะเพิ่มการเรียกกลับหลังจากการดำเนินการได้รับการเผยแพร่ตามที่เป็นไปได้Reactหรือไม่?

106 javascript  reactjs  redux  single-page-application 

ฉันมีปัญหาเล็กน้อยในการย้ายจาก React-Router v3 ไปเป็น v4 ใน v3 ฉันสามารถทำได้ทุกที่: import { browserHistory } from 'react-router'; browserHistory.push('/some/path'); ฉันจะบรรลุสิ่งนี้ใน v4.1 ได้อย่างไร ฉันรู้ว่าฉันสามารถใช้, hoc withRouter, react context หรือ event router props เมื่อคุณอยู่ใน Component แต่มันไม่ใช่กรณีสำหรับฉัน ฉันกำลังมองหาความเทียบเท่าของNavigatingOutsideOfComponentsใน v4

106 reactjs  react-router 

ฉันมีข้อมูลบางอย่างที่เรียกว่าสถานีซึ่งเป็นอาร์เรย์ที่มีวัตถุ stations : [ {call:'station one',frequency:'000'}, {call:'station two',frequency:'001'} ] ฉันต้องการแสดงองค์ประกอบ ui สำหรับตำแหน่งอาร์เรย์แต่ละตำแหน่ง จนถึงตอนนี้ฉันสามารถเขียนได้ var stationsArr = [] for (var i = 0; i < this.data.stations.length; i++) { stationsArr.push( <div className="station"> {this.data} </div> ) } แล้วแสดงผล render(){ return ( {stationsArr} ) } ปัญหาคือฉันกำลังพิมพ์ข้อมูลทั้งหมดออกมา ฉันต้องการเพียงแค่แสดงคีย์ที่เหมือน{this.data.call}แต่ไม่ได้พิมพ์อะไรเลย ฉันจะวนรอบข้อมูลนี้และส่งคืนองค์ประกอบ UI ใหม่สำหรับแต่ละตำแหน่งของอาร์เรย์ได้อย่างไร

106 javascript  reactjs 

ฉันมีตัวลดหนึ่งตัวสำหรับไคลเอนต์อีกตัวหนึ่งสำหรับ AppToolbar และอื่น ๆ ... ตอนนี้สมมติว่าฉันสร้างการดำเนินการดึงข้อมูลเพื่อลบไคลเอนต์และหากล้มเหลวฉันมีโค้ดในตัวลดไคลเอ็นต์ซึ่งควรทำบางอย่าง แต่ฉันต้องการแสดงข้อผิดพลาดส่วนกลางใน AppToolbar ด้วย แต่ไคลเอนต์และตัวลด AppToolbar ไม่แชร์ส่วนเดียวกันของสถานะและฉันไม่สามารถสร้างการดำเนินการใหม่ในตัวลด แล้วฉันจะแสดงข้อผิดพลาดทั่วโลกได้อย่างไร? ขอบคุณ อัปเดต 1: ลืมบอกไปว่าใช้este devstack อัปเดต 2: ฉันทำเครื่องหมายคำตอบของ Eric ว่าถูกต้อง แต่ฉันต้องบอกว่าวิธีแก้ปัญหาที่ฉันใช้ใน este นั้นเหมือนกับการรวมกันของคำตอบของ Eric และ Dan ... คุณต้องหาสิ่งที่เหมาะกับคุณที่สุดในรหัสของคุณ .. .

105 javascript  reactjs  redux 

ฉันต้องการตรวจสอบสิ่งที่เกิดขึ้นเมื่อคุณใช้ this.setState หลายครั้ง (2 ครั้งเพื่อประโยชน์ในการสนทนา) ฉันคิดว่าส่วนประกอบจะแสดงผลสองครั้ง แต่ดูเหมือนว่าจะแสดงผลเพียงครั้งเดียว ความคาดหวังอีกประการหนึ่งที่ฉันมีคือบางทีการเรียกที่สองสำหรับ setState จะทำงานเหนือรายการแรก แต่คุณเดาว่ามันใช้ได้ เชื่อมโยงไปยังJSfiddle var Hello = React.createClass({ render: function() { return ( <div> <div>Hello {this.props.name}</div> <CheckBox /> </div> ); } }); var CheckBox = React.createClass({ getInitialState: function() { return { alex: 0 }; }, handleChange: function(event) { this.setState({ value: event.target.value }); …

105 javascript  reactjs