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

ฉันกำลังดิ้นรนเพื่อหาปัญหาเกี่ยวกับไวยากรณ์ต่อไปนี้: export const sendVerificationEmail = async () => (dispatch) => { try { dispatch({ type: EMAIL_FETCHING, payload: true }); await Auth.sendEmailVerification(); dispatch({ type: EMAIL_FETCHING, payload: false })) } catch (error) { dispatch({ type: EMAIL_FETCHING, payload: false }); throw new Error(error); } }; ฉันได้รับข้อผิดพลาดอยู่เสมอว่า: การรอคอยเป็นคำสงวน ... แต่มันไม่ถูกต้องตามกฎหมายในฟังก์ชัน async ใช่หรือไม่? บิตการจัดส่งมาจากไลบรารีreact-thunk

91 javascript  reactjs  async-await  redux 

การป้อนข้อความอยู่ในแนวกึ่งกลางวิธีแก้ไขการป้อนข้อความนี้เพื่อให้รับข้อมูลจากมุมบนซ้าย นี่คือ css ของฉันสำหรับการป้อนข้อความ /* The Text input is center aligned, how to fix this text input so that it takes input from top left corner */ input: { flex: 1, padding: 4, marginRight: 1, marginTop: 5, fontSize: 18, borderWidth: 1, borderRadius: 4, borderColor: '#E6E5ED', backgroundColor: '#F8F8F9', justifyContent: 'flex-start', height: …

91 javascript  ios  reactjs  react-native 

ฉันมีไฟล์ภาพหมุนที่ฉันต้องการรับindex.jsและสร้างblock.build.jsดังนั้นของฉันwebpack.config.jsคือ: var config = { entry: './index.js', output: { path: __dirname, filename: 'block.build.js', }, devServer: { contentBase: './Carousel' }, module : { rules : [ { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['react', 'es2015'], plugins: ['transform-class-properties'] } } ] } }; module.exports = config; package.jsonซึ่งผมใช้อยู่ด้านล่าง: { "name": …

91 reactjs  webpack  babeljs 

ฉันต้องใช้ตรรกะทางธุรกิจบางอย่างขึ้นอยู่กับประวัติการเข้าชม สิ่งที่ฉันต้องการทำมีดังนี้: reactRouter.onUrlChange(url => { this.history.push(url); }); มีวิธีใดบ้างในการรับการติดต่อกลับจาก react-router เมื่อ URL ได้รับการอัปเดต

91 reactjs  react-router  react-router-v4  react-router-redux  react-router-dom 

ฉันพยายามที่ออกมาตอบสนอง-Router (v4) และฉันมีปัญหาในการเริ่มต้นออก Nav จะมีหนึ่งของLink's activeBE หากฉันคลิกที่Linkแท็กใด ๆสิ่งที่ใช้งานอยู่จะเริ่มทำงาน อย่างไรก็ตามฉันต้องการให้ Home Linkใช้งานได้ทันทีที่แอปเริ่มทำงานเนื่องจากเป็นส่วนประกอบที่โหลดใน/เส้นทาง มีวิธีใดบ้างที่จะทำเช่นนี้? นี่คือรหัสปัจจุบันของฉัน: const Router = () => ( <BrowserRouter> <div> <Nav> <Link activeClassName='is-active' to='/'>Home</Link> {/* I want this to start off as active */} <Link activeClassName='is-active' to='/about'>About</Link> </Nav> <Match pattern='/' exactly component={Home} /> <Match pattern='/about' exactly component={About} /> <Miss …

91 javascript  reactjs  ecmascript-6  react-router 

ฉันตั้งค่าeslint& eslint-plugin-react. เมื่อฉันเรียกใช้ ESLint ลินเตอร์จะส่งกลับno-unused-varsข้อผิดพลาดสำหรับส่วนประกอบปฏิกิริยา ฉันสมมติว่าไม่รู้จักว่าฉันกำลังใช้ JSX หรือ React syntax ความคิดใด ๆ ? ตัวอย่าง: app.js import React, { Component } from 'react'; import Header from './header.js'; export default class App extends Component { render() { return ( <div> <Header /> {this.props.children} </div> ); } } ข้อผิดพลาดของ Linter: /my_project/src/components/app.js 1:8 error …

91 javascript  reactjs  jsx  eslint 

ฉันมีการทดสอบหน่วยสำหรับreducersไฟล์. อย่างไรก็ตามเมื่อฉันทำการดีบักในเบราว์เซอร์ฉันต้องการตรวจสอบว่าการกระทำของฉันถูกเรียกอย่างถูกต้องหรือไม่และสถานะได้รับการแก้ไขตามนั้นหรือไม่ ฉันกำลังมองหาสิ่งที่ต้องการ: window._redux.store ... ในเบราว์เซอร์เพื่อให้ฉันพิมพ์สิ่งนั้นบนคอนโซลและตรวจสอบว่าสิ่งต่างๆเป็นอย่างไร ฉันจะบรรลุสิ่งนั้นได้อย่างไร?

91 javascript  reactjs  redux 

ฉันมีปัญหาในการใช้ react-select ฉันใช้แบบฟอร์ม redux และฉันได้ทำให้ส่วนประกอบการเลือกปฏิกิริยาของฉันเข้ากันได้กับฟอร์ม redux นี่คือรหัส: const MySelect = props => ( <Select {...props} value={props.input.value} onChange={value => props.input.onChange(value)} onBlur={() => props.input.onBlur(props.input.value)} options={props.options} placeholder={props.placeholder} selectedValue={props.selectedValue} /> ); และนี่คือวิธีแสดงผล: <div className="select-box__container"> <Field id="side" name="side" component={SelectInput} options={sideOptions} clearable={false} placeholder="Select Side" selectedValue={label: 'Any', value: 'Any'} /> </div> แต่ปัญหาคือดรอปดาวน์ของฉันไม่มีค่าเริ่มต้นตามที่ฉันต้องการ ฉันทำอะไรผิด? ความคิดใด ๆ ?

91 reactjs  default-value  react-select 

มีวิธีรับReact Routerเพื่อเปิดลิงค์ในแท็บใหม่หรือไม่? ฉันลองสิ่งนี้แล้วก็ไม่ได้ผล <Link to="chart" target="_blank" query={{test: this.props.test}} >Test</Link> เป็นไปได้ที่จะทำให้ยุ่งเหยิงโดยการเพิ่มสิ่งที่ต้องการonClick="foo"ลงในลิงก์เช่นเดียวกับที่ฉันมีด้านบน แต่จะมีข้อผิดพลาดคอนโซล ขอบคุณ.

91 reactjs  react-router 

สมมติว่าฉันมีการสลับง่ายๆ: เมื่อฉันคลิกปุ่มส่วนประกอบสีจะเปลี่ยนไปมาระหว่างสีแดงและสีน้ำเงิน ฉันอาจจะบรรลุผลโดยการทำอะไรแบบนี้ index.js Button: onClick={()=>{dispatch(changeColor())}} Color: this.props.color ? blue : red container.js connect(mapStateToProps)(indexPage) action_creator.js function changeColor(){ return {type: 'CHANGE_COLOR'} } reducer.js switch(){ case 'CHANGE_COLOR': return {color: true} แต่นี่เป็นโค้ดจำนวนมากที่ต้องเขียนสำหรับบางสิ่งที่ฉันสามารถทำได้ใน 5 วินาทีด้วย jQuery บางคลาสและ css ... ฉันเดาว่าสิ่งที่ฉันถามจริงๆคือฉันทำอะไรผิดที่นี่?

90 javascript  reactjs  redux 

ฉันกำลังมองหาวิธีใช้การเลื่อนแบบไม่มีที่สิ้นสุดด้วย React ฉันเจอreact-infinite-scrollและพบว่ามันไม่มีประสิทธิภาพเพราะมันเพิ่มโหนดไปยัง DOM และไม่ได้ลบออก มีโซลูชันที่พิสูจน์แล้วด้วย React ซึ่งจะเพิ่มลบและรักษาจำนวนโหนดใน DOM ให้คงที่ นี่คือปัญหาjsfiddle ในปัญหานี้ฉันต้องการให้มีองค์ประกอบใน DOM ครั้งละ 50 รายการเท่านั้น อื่น ๆ ควรจะโหลดและลบออกเมื่อผู้ใช้เลื่อนขึ้นและลง เราได้เริ่มใช้ React เนื่องจากอัลกอริทึมการเพิ่มประสิทธิภาพ ตอนนี้ฉันไม่พบวิธีแก้ปัญหานี้ ฉันได้เจอAirbnb js แต่จะใช้กับ Jquery ในการใช้การเลื่อนแบบไม่มีที่สิ้นสุดของ airbnb ฉันต้องคลายการเพิ่มประสิทธิภาพการตอบสนองซึ่งฉันไม่ต้องการทำ รหัสตัวอย่างที่ฉันต้องการเพิ่มการเลื่อนคือ (ที่นี่ฉันกำลังโหลดรายการทั้งหมดเป้าหมายของฉันคือโหลดครั้งละ 50 รายการเท่านั้น) /** @jsx React.DOM */ var Hello = React.createClass({ render: function() { return (<li>Hello {this.props.name}</li>); } }); …

90 javascript  html  infinite-scroll  reactjs 

ฉันมีอุปกรณ์ประกอบฉากบางอย่างที่มีสตริงที่อาจมีอักขระเช่น & นอกจากนี้ยังมีช่องว่าง  ฉันต้องการที่จะแทนที่ช่องว่างทั้งหมดที่มี มีวิธีง่ายๆที่ฉันสามารถทำได้หรือไม่? โปรดทราบว่าฉันไม่สามารถแสดงผลโดยใช้ไวยากรณ์นี้ได้: <div dangerouslySetInnerHTML={{__html: myValue}} /> เพราะก่อนอื่นฉันจะต้องแทนที่เอนทิตี HTML ใด ๆ ด้วยมาร์กอัป ฉันไม่ต้องการที่จะทำเช่นนี้ดูเหมือนว่าระดับต่ำเกินไป มีวิธีที่ฉันสามารถทำได้หรือไม่?

90 html  reactjs 

ฉันมีส่วนประกอบที่บางครั้งจะต้องแสดงผล<anchor>เป็นไฟล์<div>. ผมอ่านเพื่อตรวจสอบนี้คือpropthis.props.url หากมีอยู่ฉันจำเป็นต้องแสดงผลส่วนประกอบที่ห่อด้วย<a href={this.props.url}>ไฟล์. มิฉะนั้นจะแสดงผลเป็นไฟล์<div/>. เป็นไปได้ไหม นี่คือสิ่งที่ฉันกำลังทำอยู่ตอนนี้ แต่รู้สึกว่ามันง่ายขึ้น: if (this.props.link) { return ( <a href={this.props.link}> <i> {this.props.count} </i> </a> ); } return ( <i className={styles.Icon}> {this.props.count} </i> ); อัพเดท: นี่คือการล็อคขั้นสุดท้าย ขอบคุณสำหรับเคล็ดลับ@Sulthan ! import React, { Component, PropTypes } from 'react'; import classNames from 'classnames'; export default class CommentCount extends Component …

90 javascript  reactjs 

ฉันต้องการทราบวิธีการสลับสถานะบูลีนของส่วนประกอบปฏิกิริยา ตัวอย่างเช่น: ฉันมีการตรวจสอบสถานะบูลีนในตัวสร้างส่วนประกอบของฉัน: constructor(props, context) { super(props, context); this.state = { check: false }; }; ฉันพยายามสลับสถานะทุกครั้งที่มีการคลิกช่องทำเครื่องหมายโดยใช้เมธอด this.setState: <label><input type=checkbox" value="check" onChange = {(e) => this.setState({check: !check.value})}/> Checkbox </label> แน่นอนผมได้รับUncaught ReferenceError: การตรวจสอบไม่ได้กำหนดไว้ แล้วฉันจะบรรลุเป้าหมายนี้ได้อย่างไร? ขอบคุณมากล่วงหน้า

90 javascript  reactjs  reactjs-flux 

ฉันต้องการปิดเมนูแบบเลื่อนลงเมื่อเกิดการคลิกนอกคอมโพเนนต์แบบเลื่อนลง ฉันจะทำอย่างไร?

89 reactjs