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

ฉันมีสิ่งนี้: let total = newDealersDeckTotal.reduce(function(a, b) { return a + b; }, 0); console.log(total, 'tittal'); //outputs correct total setTimeout(() => { this.setState({dealersOverallTotal: total}); }, 10); console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1'); //outputs incorrect total newDealersDeckTotal เป็นเพียงอาร์เรย์ของตัวเลข[1, 5, 9]เช่น แต่this.state.dealersOverallTotalไม่ได้ให้ผลรวมที่ถูกต้อง แต่total? ฉันยังใช้เวลาหน่วงเวลาเพื่อดูว่าวิธีนี้ช่วยแก้ปัญหาได้หรือไม่ ชัดเจนหรือควรโพสต์โค้ดเพิ่มเติม

99 javascript  reactjs  state  setstate 

ลองใช้ TypeScript สำหรับโครงการ React และฉันติดอยู่กับข้อผิดพลาดนี้: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ train_1: boolean; train_2: boolean; train_3: boolean; train_4: boolean; }'. No index signature with a parameter of type 'string' was found on type '{ train_1: boolean; train_2: boolean; …

99 reactjs  typescript 

ฉันกำลังพยายามส่งชื่อคลาสไปยังส่วนประกอบการตอบสนองเพื่อเปลี่ยนสไตล์และดูเหมือนจะใช้งานไม่ได้: class Pill extends React.Component { render() { return ( <button className="pill {this.props.styleName}">{this.props.children}</button> ); } } <Pill styleName="skill">Business</Pill> ฉันพยายามเปลี่ยนรูปแบบของเม็ดยาโดยส่งชื่อชั้นที่มีรูปแบบตามลำดับ ฉันยังใหม่กับ React ดังนั้นบางทีฉันอาจจะไม่ได้ทำอย่างถูกต้อง ขอบคุณ

98 javascript  reactjs 

ฉันมีการตั้งค่าภาษาในบริบทดังต่อไปนี้ class LanguageProvider extends Component { static childContextTypes = { langConfig: PropTypes.object, }; getChildContext() { return { langConfig: 'en' }; } render() { return this.props.children; } } export default LanguageProvider; รหัสแอปพลิเคชันของฉันจะเป็นดังนี้ <LanguageProvider> <App> <MyPage /> </App> </LanguageProvider> หน้าของฉันมีส่วนประกอบสำหรับเปลี่ยนภาษา <MyPage> <LanguageSwitcher/> </MyPage> LanguageSwitcher ในการนี้MyPageจำเป็นต้องอัปเดตบริบทเพื่อเปลี่ยนภาษาเป็น 'jp' ดังต่อไปนี้ class LanguageSwitcher extends Component { …

98 javascript  reactjs  react-context 

ในการส่งแบบฟอร์มฉันกำลังพยายามdoSomething()แทนที่พฤติกรรมการโพสต์เริ่มต้น เห็นได้ชัดว่าใน React onSubmit เป็นเหตุการณ์ที่รองรับสำหรับฟอร์ม อย่างไรก็ตามเมื่อฉันลองใช้รหัสต่อไปนี้: var OnSubmitTest = React.createClass({ render: function() { doSomething = function(){ alert('it works!'); } return <form onSubmit={doSomething}> <button>Click me</button> </form>; } }); วิธีdoSomething()นี้ถูกเรียกใช้ แต่หลังจากนั้นพฤติกรรมการโพสต์เริ่มต้นจะยังคงดำเนินการอยู่ คุณสามารถทดสอบนี้ฉันjsfiddle คำถามของฉัน: ฉันจะป้องกันพฤติกรรมการโพสต์เริ่มต้นได้อย่างไร

98 javascript  forms  form-submit  reactjs  onsubmit 

ฉันต้องการนำเข้าไฟล์ CSS ไปยังส่วนประกอบการตอบสนอง ฉันได้ลองแล้วimport disabledLink from "../../../public/styles/disabledLink";แต่ได้รับข้อผิดพลาดด้านล่าง ไม่พบโมดูล: ข้อผิดพลาด: ไม่สามารถแก้ไข 'file' หรือ 'ไดเร็กทอรี' ../../../public/styles/disabledLink ใน c: \ Users \ User \ Documents \ pizza-app \ client \ src \ components @ /client/src/components/ShoppingCartLink.js 19: 20-66 แฮช: 2d281bb98fe0a961f7c4 เวอร์ชัน: webpack 1.13.2 C:\Users\User\Documents\pizza-app\client\public\styles\disabledLink.css คือตำแหน่งของไฟล์ CSS ที่ฉันพยายามโหลด สำหรับฉันดูเหมือนว่าการนำเข้าไม่ได้ค้นหาเส้นทางที่ถูกต้อง ฉันคิดว่า../../../มันจะเริ่มค้นหาพา ธ สามชั้นโฟลเดอร์ด้านบน C:\Users\User\Documents\pizza-app\client\src\components\ShoppingCartLink.js คือตำแหน่งของไฟล์ที่ควรนำเข้าไฟล์ CSS …

98 javascript  reactjs  relative-path 

บางครั้งฉันจะมีส่วนประกอบของปฏิกิริยาที่มีสภาพตามแนวคิดซึ่งฉันต้องการรีเซ็ต พฤติกรรมในอุดมคติจะเทียบเท่ากับการลบส่วนประกอบเก่าและอ่านส่วนประกอบใหม่ที่บริสุทธิ์ React จัดเตรียมวิธีการsetStateที่อนุญาตให้ตั้งค่าสถานะที่ชัดเจนของส่วนประกอบของตัวเอง แต่จะไม่รวมสถานะโดยนัยเช่นการโฟกัสของเบราว์เซอร์และสถานะแบบฟอร์มและยังไม่รวมสถานะของลูกด้วย การจับสถานะทางอ้อมทั้งหมดนั้นอาจเป็นงานที่ยุ่งยากและฉันอยากจะแก้ไขมันอย่างเข้มงวดและสมบูรณ์แทนที่จะเล่นตีตุ่นกับสถานะใหม่ ๆ มี API หรือรูปแบบในการทำสิ่งนี้หรือไม่? แก้ไข: ฉันทำตัวอย่างเล็กน้อยเพื่อแสดงให้เห็นถึงthis.replaceState(this.getInitialState())แนวทางและเปรียบเทียบกับthis.setState(this.getInitialState())แนวทาง: jsfiddle - replaceStateมีประสิทธิภาพมากขึ้น

98 reactjs 

สมมติว่าฉันมีรายการวัตถุธรรมดาอยู่ในthis.state.listนั้นฉันสามารถใช้เพื่อแสดงรายการเด็กได้ แล้ววิธีที่ถูกต้องในการแทรกวัตถุthis.state.listคืออะไร? ด้านล่างนี้เป็นวิธีเดียวที่ฉันคิดว่ามันใช้ได้เพราะคุณไม่สามารถกลายพันธุ์this.stateได้โดยตรงตามที่กล่าวไว้ในเอกสาร this._list.push(newObject): this.setState({list: this._list}); นี่ดูน่าเกลียดสำหรับฉัน มีวิธีที่ดีกว่า?

97 javascript  reactjs 

ฉันยังใหม่กับ ReactJs นี่คือรหัสของฉัน: var React = require('react'); var ReactDOM = require('react-dom'); var {Route, Router, IndexRoute, hashHistory} = require('react-router'); var Main = require('Main'); ReactDOM.render( <Router history={hashHistory}> <Route path="/" component={Main}></Route> </Router>, document.getElementById('app')); และรวบรวมด้วย webpack นอกจากนี้ฉันยังเพิ่มองค์ประกอบหลักในนามแฝงของฉัน คอนโซลแสดงข้อผิดพลาดเหล่านี้: ฉันอ่านลิงก์เหล่านี้ด้วย: React Router ล้มเหลว prop 'history' ไม่ได้กำหนด ฉันจะแก้ไขประวัติต้องทำเครื่องหมายอย่างไรเมื่อไม่ได้กำหนดค่า การอัปเกรด React-Router และการแทนที่ hashHistory ด้วย browserHistory และการค้นหามากมายในเว็บ แต่ฉันไม่สามารถแก้ไขปัญหานี้ได้ …

97 reactjs  react-router 

ในเอกสารของ React นี้ได้กล่าวไว้ว่า ตื้นเปรียบเทียบทำการตรวจสอบความเท่าเทียมกันแบบตื้น ๆ บนอุปกรณ์ประกอบฉากปัจจุบันและวัตถุ nextProps ตลอดจนสถานะปัจจุบันและวัตถุ nextState สิ่งที่ฉันไม่เข้าใจคือถ้ามันเปรียบเทียบวัตถุอย่างตื้น ๆ เมธอด shouldComponentUpdate จะคืนค่าจริงเสมอเช่น เราไม่ควรกลายพันธุ์ของรัฐ และหากเราไม่ได้ทำการเปลี่ยนแปลงสถานะการเปรียบเทียบจะส่งกลับเท็จเสมอดังนั้นการอัปเดต shouldComponent จะคืนค่าจริงเสมอ ฉันสับสนเกี่ยวกับวิธีการทำงานและเราจะลบล้างสิ่งนี้เพื่อเพิ่มประสิทธิภาพได้อย่างไร

97 javascript  reactjs 

ฉันจะทริกเกอร์เหตุการณ์คลิกด้วยตนเองในReactJS ได้อย่างไร เมื่อผู้ใช้คลิกที่ element1 ฉันต้องการเรียกคลิกinputแท็กโดยอัตโนมัติ <div className="div-margins logoContainer"> <div id="element1" className="content" onClick={this.uploadLogoIcon}> <div className="logoBlank" /> </div> <input accept="image/*" type="file" className="hide"/> </div>

97 html  reactjs 

เมื่อเร็ว ๆ นี้ฉันได้ศึกษามากมายเกี่ยวกับฟังก์ชันการทำงานและวิธีการใช้ไลบรารี Facebook JavaScript React.js เมื่อพูดถึงความแตกต่างของส่วนที่เหลือของโลกจาวาสคริปต์มักจะเป็นสองรูปแบบการเขียนโปรแกรมdeclarativeและimperativeจะ mentionned อะไรคือความแตกต่างระหว่างทั้งสอง?

97 reactjs 

ฉันไม่อยากเชื่อเลยว่าฉันกำลังถามคำถามที่ชัดเจน แต่ฉันยังคงได้รับข้อผิดพลาดในบันทึกของคอนโซล Console บอกว่าไม่พบโมดูลในไดเร็กทอรี แต่ฉันตรวจสอบการพิมพ์ผิดอย่างน้อย 10 ครั้ง อย่างไรก็ตามนี่คือรหัสส่วนประกอบ ฉันต้องการแสดงส่วนหัวในรูท import React, { Component } from 'react' import Header from './src/components/header/header' import logo from './logo.svg' import './App.css' class App extends Component { render() { return ( <Header/> ); } } export default App; นี่คือHeaderส่วนประกอบ import React, { Component } from 'react' …

97 javascript  reactjs 

ฉันรู้ว่าส่วนขยายของ Chrome ใช้ "manifest.json" แต่ที่นี่ก็ใช้เป็นอย่างอื่นเช่นกัน เนื้อหา - { "short_name": "React App", "name": "Create React App Sample", "icons": [ { "src": "favicon.ico", "sizes": "192x192", "type": "image/png" } ], "start_url": "./index.html", "display": "standalone", "theme_color": "#000000", "background_color": "#ffffff" } เมื่อฉันเปลี่ยนค่าบางอย่างอัปเดตเพจ แต่ไม่มีอะไรเปลี่ยนแปลง

97 reactjs  manifest  create-react-app 

ฉันยังใหม่กับ React.js Library และฉันกำลังอ่านบทแนะนำบางส่วนและฉันก็เจอ: this.setState this.replaceState คำอธิบายที่ระบุไม่ชัดเจนมากนัก (IMO) setState is done to 'set' the state of a value, even if its already set in the 'getInitialState' function. ในทำนองเดียวกัน The replaceState() method is for when you want to clear out the values already in state, and add new ones. ฉันลองthis.setState({data: someArray});ตามด้วยthis.replaceState({test: …

96 javascript  frontend  reactjs