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

ฉันเขียนแอปใหม่เพื่อใช้ Flux และฉันมีปัญหาในการดึงข้อมูลจากร้านค้า ฉันมีส่วนประกอบมากมายและพวกมันก็ทำรังมากมาย บางอันมีขนาดใหญ่ ( Article) บางอันมีขนาดเล็กและเรียบง่าย ( UserAvatar, UserLink) ฉันกำลังดิ้นรนกับลำดับชั้นขององค์ประกอบที่ฉันควรอ่านข้อมูลจากร้านค้า ฉันลองสองวิธีที่รุนแรงซึ่งฉันไม่ชอบ: ส่วนประกอบเอนทิตีทั้งหมดอ่านข้อมูลของตนเอง ส่วนประกอบแต่ละรายการที่ต้องการข้อมูลบางส่วนจาก Store จะได้รับเพียง ID เอนทิตีและดึงข้อมูลเอนทิตีด้วยตัวเอง ตัวอย่างเช่นArticleมีการส่งผ่านarticleId, UserAvatarและจะถูกส่งผ่านUserLinkuserId แนวทางนี้มีข้อเสียที่สำคัญหลายประการ (กล่าวถึงภายใต้ตัวอย่างโค้ด) var Article = React.createClass({ mixins: [createStoreMixin(ArticleStore)], propTypes: { articleId: PropTypes.number.isRequired }, getStateFromStores() { return { article: ArticleStore.get(this.props.articleId); } }, render() { var article = this.state.article, userId = …

89 javascript  reactjs  reactjs-flux 

ในจาวาสคริปต์เก่าธรรมดาฉันมี DIV <div class="movie" id="my_movie"> และรหัสจาวาสคริปต์ต่อไปนี้ var myMovie = document.getElementById('my_movie'); myMovie.addEventListener('nv-enter', function (event) { console.log('change scope'); }); ตอนนี้ฉันมี React Component อยู่ในส่วนประกอบนี้ในวิธีการเรนเดอร์ฉันกำลังส่งคืน div ของฉัน ฉันจะเพิ่มตัวฟังเหตุการณ์สำหรับเหตุการณ์ที่กำหนดเองได้อย่างไร (ฉันใช้ไลบรารีนี้สำหรับแอพทีวี - การนำทาง ) import React, { Component } from 'react'; class MovieItem extends Component { render() { if(this.props.index === 0) { return ( <div aria-nv-el …

89 reactjs 

เป้าหมายของฉันคือการเพิ่มส่วนประกอบแบบไดนามิกในเพจ / คอมโพเนนต์หลัก ฉันเริ่มต้นด้วยเทมเพลตตัวอย่างพื้นฐานเช่นนี้: main.js: var App = require('./App.js'); var SampleComponent = require('./SampleComponent.js'); ReactDOM.render(<App/>, document.body); ReactDOM.render(<SampleComponent name="SomeName"/>, document.getElementById('myId')); App.js: var App = React.createClass({ render: function() { return ( <div> <h1>App main component! </h1> <div id="myId">myId div</div> </div> ); } }); SampleComponent.js: var SampleComponent = React.createClass({ render: function() { return ( …

89 javascript  reactjs  babeljs 

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

89 javascript  reactjs  dom-events 

ฉันกำลังใช้ตัวอย่างจาก https://github.com/moroshko/react-autosuggest รหัสสำคัญเป็นดังนี้: import React, { Component } from 'react'; import suburbs from 'json!../suburbs.json'; function getSuggestions(input, callback) { const suggestions = suburbs .filter(suburbObj => suburbMatchRegex.test(suburbObj.suburb)) .sort((suburbObj1, suburbObj2) => suburbObj1.suburb.toLowerCase().indexOf(lowercasedInput) - suburbObj2.suburb.toLowerCase().indexOf(lowercasedInput) ) .slice(0, 7) .map(suburbObj => suburbObj.suburb); // 'suggestions' will be an array of strings, e.g.: // ['Mentone', 'Mill Park', …

89 javascript  json  reactjs  webpack 

บางทีฉันอาจเข้าใจผิดบางอย่าง แต่ useCallback Hook ทำงานทุกครั้งเมื่อเกิดการเรนเดอร์ใหม่ ฉันส่งอินพุต - เป็นอาร์กิวเมนต์ที่สองให้กับ useCallback - ค่าคงที่ไม่เคยเปลี่ยนแปลง - แต่การโทรกลับแบบบันทึกที่ส่งคืนยังคงรันการคำนวณที่มีราคาแพงของฉันทุกครั้งที่เรนเดอร์ (ฉันค่อนข้างแน่ใจ - คุณสามารถตรวจสอบได้ด้วยตัวเองในตัวอย่างด้านล่าง) ฉันได้เปลี่ยน useCallback เป็น useMemo - และ useMemo ทำงานตามที่คาดไว้ - ทำงานเมื่อผ่านการเปลี่ยนแปลงอินพุต และช่วยจดจำการคำนวณที่มีราคาแพง ตัวอย่างสด: 'use strict'; const { useState, useCallback, useMemo } = React; const neverChange = 'I never change'; const oneSecond = 1000; function App() …

89 reactjs 

ฉันได้ทดสอบแอปพลิเคชัน React.js ของฉันบน internet explorer และพบว่ารหัส ES6 / 7 บางรหัสชอบArray.prototype.includes()ทำลาย ฉันใช้create-react-appและเห็นได้ชัดว่าพวกเขาเลือกที่จะไม่รวม polyfills จำนวนมากเนื่องจากไม่ใช่ทุกคนที่ต้องการและทำให้เวลาในการสร้างช้าลง (ดูตัวอย่างที่นี่และที่นี่ ) เอกสาร (ขณะเขียน) แนะนำ: หากคุณใช้คุณสมบัติ ES6 + อื่น ๆ ที่ต้องการการสนับสนุนรันไทม์ (เช่น Array.from () หรือ Symbol) ตรวจสอบให้แน่ใจว่าคุณได้ใส่ polyfills ที่เหมาะสมด้วยตนเองหรือว่าเบราว์เซอร์ที่คุณกำหนดเป้าหมายรองรับอยู่แล้ว ดังนั้น ... วิธีที่ดีที่สุดในการ "รวม" ด้วยตนเองคืออะไร?

88 javascript  reactjs  ecmascript-6  create-react-app  ecmascript-7 

ซึ่งแตกต่างจาก ListView ที่เราสามารถอัปเดต this.state.datasource มีวิธีการหรือตัวอย่างในการอัปเดต FlatList หรือ re-render หรือไม่? เป้าหมายของฉันคืออัปเดตค่าข้อความเมื่อผู้ใช้กดปุ่ม ... renderEntries({ item, index }) { return( <TouchableHighlight onPress={()=> this.setState({value: this.state.data[index].value+1})> <Text>{this.state.data[index].value}</Text> </TouchableHighlight> ) } <FlatList ref={(ref) => { this.list = ref; }} keyExtractor={(item) => item.entry.entryId} data={this.state.data} renderItem={this.renderEntries.bind(this)} horizontal={false} />

88 reactjs  react-native  react-native-flatlist 

ฉันมีตัวลดและในการคำนวณสถานะใหม่ฉันต้องการข้อมูลจากการกระทำและข้อมูลจากส่วนหนึ่งของสถานะที่ไม่ได้จัดการโดยตัวลดนี้ โดยเฉพาะในตัวลดที่ฉันจะแสดงด้านล่างฉันต้องการเข้าถึงaccountDetails.stateOfResidenceIdฟิลด์ initialState.js: export default { accountDetails: { stateOfResidenceId: '', accountType: '', accountNumber: '', product: '' }, forms: { blueprints: [ ] } }; formReducer.js: import * as types from '../constants/actionTypes'; import objectAssign from 'object-assign'; import initialState from './initialState'; import formsHelper from '../utils/FormsHelper'; export default function formsReducer(state = initialState.forms, action) …

88 javascript  reactjs  redux 

นี่คือตัวเลข นาที + gzip 26k gzip 90k เดิม 450 + k และ React ไม่มีคุณสมบัติมากมายในเอกสารประกอบ ทำไมมันใหญ่จัง ฉันรู้สึกว่าเป็นการใช้งาน DOM ที่มีน้ำหนักเบา แต่ฉันต้องการความแน่ใจ

88 reactjs 

ฉันมีการตรวจสอบความถูกต้องโทเค็นจากเซิร์ฟเวอร์ดังนั้นเมื่อแอป Redux ของฉันถูกโหลดในตอนแรกฉันต้องร้องขอไปยังเซิร์ฟเวอร์นี้เพื่อตรวจสอบว่าผู้ใช้ได้รับการรับรองความถูกต้องหรือไม่และถ้าใช่ฉันควรได้รับโทเค็น ฉันพบว่าไม่แนะนำให้ใช้การดำเนินการ INIT หลักของ Redux ดังนั้นฉันจะส่งการดำเนินการก่อนที่แอปจะแสดงผลได้อย่างไร

88 reactjs  redux 

การใช้ TypeScript กับ React เราไม่จำเป็นต้องขยายอีกต่อไปReact.Propsเพื่อให้คอมไพเลอร์รู้ว่าอุปกรณ์ประกอบฉากส่วนประกอบปฏิกิริยาทั้งหมดสามารถมีลูกได้: interface MyProps { } class MyComponent extends React.Component<MyProps, {}> { public render(): JSX.Element { return <div>{this.props.children}</div>; } } อย่างไรก็ตามดูเหมือนว่าจะไม่ใช่กรณีสำหรับส่วนประกอบการทำงานที่ไร้สถานะ: const MyStatelessComponent = (props: MyProps) => { return ( <div>{props.children}</div> ); }; แสดงข้อผิดพลาดในการคอมไพล์: ข้อผิดพลาด: (102, 17) TS2339: ไม่มีคุณสมบัติ 'ลูก' ในประเภท 'MyProps' ฉันเดาว่านี่เป็นเพราะไม่มีทางที่คอมไพเลอร์จะรู้ว่าฟังก์ชันวานิลลาจะได้รับchildrenในอาร์กิวเมนต์อุปกรณ์ประกอบฉาก คำถามคือเราจะใช้ลูกในองค์ประกอบการทำงานที่ไร้สัญชาติใน TypeScript ได้อย่างไร? ฉันสามารถกลับไปใช้วิธีเดิมMyProps …

88 reactjs  typescript 

ในขณะที่พัฒนาด้วย create-react-app เบราว์เซอร์ของฉันจะเข้าสู่โหมด debugger ตามคำเตือน: มันแตกในซอร์สโค้ดของ react-dev-tools: // --- Welcome to debugging with React DevTools --- // This debugger statement means that you've enabled the "break on warnings" feature. // Use the browser's Call Stack panel to step out of this override function- // to where the original warning or …

87 reactjs  javascript-debugger 

ปัญหา ฉันกำลังตั้งค่าการตอบสนองrefโดยใช้นิยามฟังก์ชันแบบอินไลน์ render = () => { return ( <div className="drawer" ref={drawer => this.drawerRef = drawer}> ดังนั้นในcomponentDidMountการอ้างอิง DOM ไม่ได้ตั้งค่าไว้ componentDidMount = () => { // this.drawerRef is not defined ความเข้าใจของฉันคือการrefเรียกกลับควรจะถูกเรียกใช้ในระหว่างการเมานต์อย่างไรก็ตามการเพิ่มconsole.logคำสั่งเปิดเผยcomponentDidMountจะถูกเรียกก่อนฟังก์ชันการเรียกกลับอ้างอิง ตัวอย่างโค้ดอื่น ๆ ที่ฉันได้ดูตัวอย่างเช่นการสนทนาบน github นี้บ่งบอกถึงข้อสันนิษฐานเดียวกันcomponentDidMountควรถูกเรียกหลังจากการrefเรียกกลับใด ๆ ที่กำหนดไว้renderแม้จะระบุไว้ในการสนทนา ดังนั้น componentDidMount จึงถูกไล่ออกหลังจากเรียกใช้ ref callback ทั้งหมดแล้ว? ใช่. ฉันใช้ react 15.4.1 อย่างอื่นฉันได้ลองแล้ว เพื่อตรวจสอบว่าrefมีการเรียกใช้ฟังก์ชันนี้ฉันได้ลองกำหนดมันในคลาสเช่นนี้ setDrawerRef …

87 javascript  reactjs 

ฉันมีreactjsแอปที่เขียนโดยใช้มาตรฐาน ES6 และฉันใช้webpackเพื่อสร้างมัน webpackโหลดโมดูลใช้js babel-loaderเพื่อความเฉพาะเจาะจงฉันใช้แพ็คเกจเวอร์ชันต่อไปนี้: ├── babel@5.8.34 ├── babel-core@5.8.34 ├── babel-loader@5.4.0 └── webpack@1.12.6 อย่างไรก็ตามหลังจากที่สร้างมัน IE 10 'Symbol' is undefinedให้ข้อผิดพลาดดังต่อไปนี้ ไม่babelควรจะกำหนดSymbol? มีการกำหนดค่าเฉพาะสำหรับwebpackหรือbabelต้องตั้งค่าเพื่อให้ใช้งานได้หรือไม่ ฉันใช้{stage: 0}การกำหนดค่าใน.babelrcไฟล์. ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชมขอบคุณ!

87 reactjs  webpack  babeljs