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

ฉันมีแอปตอบกลับ helloworld ง่ายๆที่สร้างขึ้นจากหลักสูตรออนไลน์ แต่ฉันได้รับข้อผิดพลาดนี้: วัตถุการกำหนดค่าไม่ถูกต้อง Webpack เริ่มต้นโดยใช้ออบเจ็กต์การกำหนดค่าที่ไม่ตรงกับสคีมา API - การกำหนดค่ามีคุณสมบัติที่ไม่รู้จัก 'postcss' คุณสมบัติเหล่านี้ถูกต้อง: object {amd ?, bail ?, cache ?, context ?, dependencies ?, devServer ?, devtool ?, entry, externals ?, loader ?, module ?, name ?, node ?, output ?, performance? , plugins?, profile ?, recordsInputPath ?, recordsO utputPath ?, …

102 reactjs  typescript  webpack 

ฉันมีไลบรารีคอมโพเนนต์ที่ฉันกำลังเขียนการทดสอบหน่วยสำหรับการใช้ Jest และ react-testing-library จากอุปกรณ์ประกอบฉากหรือเหตุการณ์บางอย่างฉันต้องการตรวจสอบว่าองค์ประกอบบางอย่างไม่ได้รับการแสดงผล getByText, getByTestIdฯลฯ จากเส้นข้างและความผิดพลาดในreact-testing-libraryถ้าองค์ประกอบไม่พบสาเหตุที่ทำให้การทดสอบที่จะล้มเหลวก่อนที่จะexpectเกิดเพลิงไหม้ฟังก์ชั่น คุณจะทดสอบสิ่งที่ไม่มีอยู่ใน jest โดยใช้ react-testing-library ได้อย่างไร?

102 reactjs  jestjs  react-testing-library 

ฉันกำลังทำงานกับ Reactjs เขียนส่วนประกอบเมนู "use strict"; var React = require("react"); var Menus = React.createClass({ item_url: function (item,categories,articles) { console.log('afdasfasfasdfasdf'); var url='XXX'; if (item.type == 1) { url = item.categoryId == null ? 'javascript:void(0)' : path('buex_portal_browse_category', {slug: categories[item.categoryId].slug}); } else if (item.type == 2) { url = item.articleId == null ? 'javascript:void(0)' …

101 javascript  reactjs  this  map-function 

PropTypes และ Flow ครอบคลุมสิ่งที่คล้ายกัน แต่ใช้วิธีการที่แตกต่างกัน PropTypes สามารถให้คำเตือนคุณระหว่างรันไทม์ซึ่งจะเป็นประโยชน์ในการค้นหาการตอบสนองที่ผิดรูปแบบที่มาจากเซิร์ฟเวอร์เป็นต้นอย่างไรก็ตาม Flow ดูเหมือนจะเป็นอนาคตและด้วยแนวคิดเช่น generics เป็นโซลูชันที่ยืดหยุ่นมาก นอกจากนี้การเติมข้อความอัตโนมัติที่นำเสนอโดย Nuclide ก็เป็นข้อดีอย่างมากสำหรับ Flow คำถามของฉันตอนนี้คือวิธีที่ดีที่สุดในการเริ่มโครงการใหม่ หรืออาจเป็นทางออกที่ดีในการใช้ทั้ง Flow และ PropTypes ปัญหาในการใช้ทั้งสองอย่างคือคุณเขียนโค้ดซ้ำกันมาก นี่คือตัวอย่างของแอปเครื่องเล่นเพลงที่ฉันเขียน: export const PlaylistPropType = PropTypes.shape({ next: ItemPropTypes, current: ItemPropTypes, history: PropTypes.arrayOf(ItemPropTypes).isRequired }); export type Playlist = { next: Item, current: Item, history: Array<Item> }; โดยทั่วไปคำจำกัดความทั้งสองจะมีข้อมูลที่เหมือนกันและเมื่อมีการเปลี่ยนแปลงชนิดข้อมูลจำเป็นต้องอัปเดตคำจำกัดความทั้งสอง ฉันพบปลั๊กอิน Babelนี้เพื่อแปลงการประกาศประเภทเป็น PropTypes …

101 reactjs  flowtype  react-proptypes 

สายเดี่ยวใช้งานได้ดี render: function () { return ( {[1,2,3].map(function (n) { return <p>{n}</p> }} ); } ไม่ใช่สำหรับหลายบรรทัด render: function () { return ( {[1,2,3].map(function (n) { return ( <h3>Item {n}</h3> <p>Description {n}</p> ) }} ); } ขอบคุณ.

101 reactjs 

ฉันใช้แท็ก & nbsp ใน jsx และไม่แสดงช่องว่าง ต่อไปนี้เป็นข้อมูลโค้ดของฉันเล็กน้อยโปรดช่วยด้วย var Reporting=React.createClass({ render: function(){ return( <div style={divPositionReporting}> <p>Pricing Reports</p> <hr></hr> Select Scenario:   <select> <option></option> </select> <button type="button">Get Pricing Report</button> <br/> Select Takeout Scenario:  <select> <option></option> </select> <button type="button">Get Pricing Report</button> <br/> </div> ); }, });

101 html  reactjs  jsx 

ฉันเพิ่งเริ่มต้นด้วย Reactjs และกำลังเขียนส่วนประกอบง่ายๆเพื่อแสดง liแท็กและพบข้อผิดพลาดนี้: โทเค็นที่ไม่คาดคิด '<' ฉันได้วางตัวอย่างไว้ที่ jsbin ด้านล่าง http://jsbin.com/UWOquRA/1/edit?html,js,console,output โปรดแจ้งให้เราทราบว่าฉันทำอะไรผิด

100 reactjs 

ฉันมีสิ่งต่อไปนี้: <Route name="app" path="/" handler={App}> <Route name="dashboards" path="dashboards" handler={Dashboard}> <Route name="exploreDashboard" path="exploreDashboard" handler={ExploreDashboard} /> <Route name="searchDashboard" path="searchDashboard" handler={SearchDashboard} /> <DefaultRoute handler={DashboardExplain} /> </Route> <DefaultRoute handler={SearchDashboard} /> </Route> เมื่อใช้ DefaultRoute SearchDashboard จะแสดงผลไม่ถูกต้องเนื่องจากแดชบอร์ด * ใด ๆ จำเป็นต้องแสดงผลภายในแดชบอร์ด ฉันต้องการให้ DefaultRoute ของฉันภายใน "แอป" เส้นทางชี้ไปที่เส้นทาง "searchDashboard" นี่คือสิ่งที่ฉันสามารถทำได้ด้วย React Router หรือฉันควรใช้ Javascript ปกติ (สำหรับการเปลี่ยนเส้นทางหน้า) สำหรับสิ่งนี้ โดยทั่วไปหากผู้ใช้ไปที่โฮมเพจฉันต้องการส่งไปที่แดชบอร์ดการค้นหาแทน …

100 javascript  routes  reactjs  url-redirection  react-router 

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

100 javascript  reactjs 

ฉันมีองค์ประกอบสองส่วน: องค์ประกอบหลักที่ฉันต้องการเปลี่ยนสถานะขององค์ประกอบลูก: class ParentComponent extends Component { toggleChildMenu() { ????????? } render() { return ( <div> <button onClick={toggleChildMenu.bind(this)}> Toggle Menu from Parent </button> <ChildComponent /> </div> ); } } และส่วนประกอบของเด็ก : class ChildComponent extends Component { constructor(props) { super(props); this.state = { open: false; } } toggleMenu() { this.setState({ open: …

100 javascript  reactjs 

วิธีที่ถูกต้องในการอัปเดตสถานะคือวัตถุที่ซ้อนกันใน React with Hooks คืออะไร? export Example = () => { const [exampleState, setExampleState] = useState( {masterField: { fieldOne: "a", fieldTwo: { fieldTwoOne: "b" fieldTwoTwo: "c" } } }) วิธีการหนึ่งที่จะใช้setExampleStateในการปรับปรุงexampleStateการa(ผนวกภาคสนาม)? const a = { masterField: { fieldOne: "a", fieldTwo: { fieldTwoOne: "b", fieldTwoTwo: "c" } }, masterField2: { fieldOne: "c", …

100 javascript  reactjs  react-hooks 

ฉันกำลังพยายามสร้างแบบฟอร์มง่ายๆด้วยการตอบสนอง แต่ประสบปัญหาในการทำให้ข้อมูลเชื่อมโยงกับ defaultValue ของฟอร์มอย่างถูกต้อง พฤติกรรมที่ฉันกำลังมองหาคือ: เมื่อฉันเปิดหน้าของฉันช่องป้อนข้อความควรจะเต็มไปด้วยข้อความ AwayMessage ของฉันในฐานข้อมูลของฉัน นั่นคือ "ข้อความตัวอย่าง" ตามหลักการแล้วฉันต้องการมีตัวยึดตำแหน่งในช่องป้อนข้อความหาก AwayMessage ในฐานข้อมูลของฉันไม่มีข้อความ อย่างไรก็ตามตอนนี้ฉันพบว่าช่องป้อนข้อความว่างทุกครั้งที่รีเฟรชหน้า (แม้ว่าสิ่งที่ฉันพิมพ์ลงในอินพุตจะบันทึกอย่างถูกต้องและคงอยู่) ฉันคิดว่านี่เป็นเพราะ html ของฟิลด์ข้อความอินพุตโหลดขึ้นเมื่อ AwayMessage เป็นวัตถุว่างเปล่า แต่จะไม่รีเฟรชเมื่อโหลด awayMessage นอกจากนี้ฉันไม่สามารถระบุค่าเริ่มต้นสำหรับฟิลด์ได้ ฉันลบรหัสบางส่วนออกเพื่อความชัดเจน (เช่น onToggleChange) window.Pages ||= {} Pages.AwayMessages = React.createClass getInitialState: -> App.API.fetchAwayMessage (data) => @setState awayMessage:data.away_message {awayMessage: {}} onTextChange: (event) -> console.log "VALUE", event.target.value onSubmit: (e) -> …

100 javascript  forms  reactjs  coffeescript  2-way-object-databinding 

ก่อนที่จะโพสต์คำถามนี้ฉันพยายามค้นหาใน sqa stackexchange แต่ฉันไม่พบโพสต์เกี่ยวกับตื้นและแสดงผลที่นั่นดังนั้นฉันหวังว่าจะมีคนช่วยฉันได้ที่นี่ ฉันควรใช้ตื้นและเรนเดอร์ในการทดสอบส่วนประกอบปฏิกิริยาเมื่อใด จากเอกสารของ airbnb ฉันได้แสดงความคิดเห็นเกี่ยวกับความแตกต่างของทั้งสอง: เนื่องจากตื้นเป็นการทดสอบส่วนประกอบเป็นหน่วยดังนั้นจึงควรใช้สำหรับส่วนประกอบ "หลัก" (เช่นตารางกระดาษห่อ ฯลฯ ) Render มีไว้สำหรับส่วนประกอบย่อย เหตุผลที่ฉันถามคำถามนี้คือฉันมีเวลายากที่จะคิดว่าฉันควรใช้อันไหน (แม้ว่าเอกสารจะบอกว่าคล้ายกันมากก็ตาม) ดังนั้นฉันจะรู้ได้อย่างไรว่าควรใช้อันไหนในสถานการณ์เฉพาะ

100 testing  meteor  reactjs  chai  enzyme 

มีวิธีในการจำลองcomponentDidMountองค์ประกอบการทำงานของปฏิกิริยาผ่านตะขอหรือไม่?

99 javascript  reactjs  react-hooks 

ฉันกำลังพยายามนำเข้าส่วนประกอบจาก react-materialize เป็น - import {Navbar, NavItem} from 'react-materialize'; แต่เมื่อ webpack กำลังรวบรวมของฉัน.tsxมันแสดงข้อผิดพลาดสำหรับข้างต้นเป็น - ERROR in ./src/common/navbar.tsx (3,31): error TS7016: Could not find a declaration file for module 'react-materi alize'. 'D:\Private\Works\Typescript\QuickReact\node_modules\react-materialize\l ib\index.js' implicitly has an 'any' type. ความละเอียดใด ๆ สำหรับสิ่งนี้ฉันไม่แน่ใจว่าจะแก้ไขคำสั่งการนำเข้านี้อย่างไรให้ใช้งานได้ts-loaderและ webpack index.jsของการตอบสนอง-เป็นตัวเป็นตนลักษณะชอบนี้ แต่วิธีแก้ปัญหานี้สำหรับการนำเข้าโมดูลในไฟล์ของฉันเอง .. https://github.com/react-materialize/react-materialize/blob/master/src/index.js

99 reactjs  webpack  webpack-2