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

แทนที่จะเขียนส่วนประกอบของฉันภายในคลาสฉันต้องการใช้ไวยากรณ์ของฟังก์ชันแทน ฉันจะแทนที่วิธีcomponentDidMount, componentWillMountภายในชิ้นส่วนฟังก์ชั่น? เป็นไปได้หรือไม่? const grid = (props) => { console.log(props); let {skuRules} = props; const componentDidMount = () => { if(!props.fetched) { props.fetchRules(); } console.log('mount it!'); }; return( <Content title="Promotions" breadcrumbs={breadcrumbs} fetched={skuRules.fetched}> <Box title="Sku Promotion"> <ActionButtons buttons={actionButtons} /> <SkuRuleGrid data={skuRules.payload} fetch={props.fetchSkuRules} /> </Box> </Content> ) }

136 reactjs  redux 

ฉันใหม่เพื่อตอบสนองฉันต้องการรวม bootstrap ในแอพตอบโต้ของฉัน ฉันติดตั้ง bootstrap โดย npm install bootstrap --save ตอนนี้ต้องการโหลด bootstrap css และ js ในแอพ react ของฉัน ฉันใช้ webpack webpack.config.js var config = { entry: './src/index', output: { path: './', filename: 'index.js' }, devServer: { inline: true, port: 8080, historyApiFallback: true, contentBase:'./src' }, module: { loaders: [ { test: …

135 twitter-bootstrap  reactjs  webpack 

ฉันมีปัญหากับภาพของฉันในโครงการตอบสนองของฉัน อันที่จริงฉันคิดเสมอว่าพา ธ สัมพัทธ์ไปยังแอตทริบิวต์ src ถูกสร้างขึ้นบนสถาปัตยกรรมไฟล์ นี่คือสถาปัตยกรรมไฟล์ของฉัน: components file1.jsx file2.jsx file3.jsx container img js ... อย่างไรก็ตามฉันตระหนักว่าเส้นทางถูกสร้างขึ้นบน url ในองค์ประกอบหนึ่งของฉัน (ตัวอย่างเช่นใน file1.jsx) ฉันมีสิ่งนี้: localhost/details/2 <img src="../img/myImage.png" /> -> works localhost/details/2/id <img src="../img/myImage.png" /> -> doesn't work, images are not displayed เป็นไปได้อย่างไรที่จะแก้ปัญหานี้? ฉันต้องการให้ในรูปแบบของเส้นทางใด ๆ ที่จัดการโดย react-router ภาพทั้งหมดสามารถแสดงด้วยเส้นทางเดียวกัน

135 javascript  reactjs  webpack 

อะไรคือความแตกต่างระหว่างส่วนประกอบและคอนเทนเนอร์ใน react redux?

135 javascript  reactjs  redux 

ฉันมีปัญหาเมื่อไปที่หน้าอื่นตำแหน่งของมันจะยังคงเหมือนหน้าก่อน ดังนั้นจะไม่เลื่อนขึ้นไปด้านบนโดยอัตโนมัติ ฉันพยายามใช้window.scrollTo(0, 0)กับonChangeเราเตอร์ด้วย ฉันเคยscrollBehaviorแก้ไขปัญหานี้ด้วย แต่ไม่ได้ผล ข้อเสนอแนะเกี่ยวกับเรื่องนี้หรือไม่?

135 javascript  reactjs  react-router  react-router-redux 

ฉันกำลังเรียนรู้แนวคิด hooks ใน React และพยายามทำความเข้าใจตัวอย่างด้านล่าง import { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } ตัวอย่างข้างต้นจะเพิ่มตัวนับในพารามิเตอร์ฟังก์ชันตัวจัดการเอง จะเกิดอะไรขึ้นถ้าฉันต้องการแก้ไขค่าการนับภายในฟังก์ชันตัวจัดการเหตุการณ์ …

134 javascript  reactjs  react-native  react-hooks 

React hooks แนะนำuseStateสำหรับการตั้งค่าสถานะส่วนประกอบ แต่ฉันจะใช้ hooks เพื่อแทนที่การโทรกลับเช่นรหัสด้านล่างได้อย่างไร: setState( { name: "Michael" }, () => console.log(this.state) ); ฉันต้องการทำอะไรบางอย่างหลังจากอัปเดตสถานะแล้ว ฉันรู้ว่าฉันสามารถใช้useEffectทำสิ่งพิเศษได้ แต่ฉันต้องตรวจสอบสถานะก่อนหน้าซึ่งต้องใช้รหัสบิต ฉันกำลังมองหาวิธีง่ายๆที่สามารถใช้กับuseStateตะขอได้

134 reactjs 

แม้ว่าจะมีคำถามคล้าย ๆ กันว่าฉันไม่สามารถสร้างไฟล์ที่มีหลายฟังก์ชันได้ ไม่แน่ใจว่าวิธีนี้ล้าสมัยไปแล้วหรือไม่เนื่องจาก RN มีการพัฒนาอย่างรวดเร็ว จะสร้างฟังก์ชัน global helper ใน react native ได้อย่างไร? ฉันยังใหม่กับ React Native สิ่งที่ฉันต้องการทำคือสร้างไฟล์ js ที่เต็มไปด้วยฟังก์ชันที่สามารถใช้ซ้ำได้มากมายจากนั้นนำเข้าในส่วนประกอบและเรียกใช้จากที่นั่น สิ่งที่ฉันทำมาจนถึงตอนนี้อาจจะดูโง่ แต่ฉันรู้ว่าคุณจะถามมันดังนั้นพวกเขาจึงอยู่ที่นี่ ฉันพยายามสร้างชื่อคลาส Chandu และส่งออกเป็นแบบนี้ 'use strict'; import React, { Component } from 'react'; import { AppRegistry, Text, TextInput, View } from 'react-native'; export default class Chandu extends Component { constructor(props){ …

133 reactjs  react-native 

ฉันกำลังเขียนสคริปต์ที่เลื่อนลงด้านล่างหรือด้านบนของอินพุตขึ้นอยู่กับความสูงของดรอปดาวน์และตำแหน่งของอินพุตบนหน้าจอ นอกจากนี้ฉันต้องการตั้งค่าตัวปรับเปลี่ยนเป็นแบบเลื่อนลงตามทิศทางของมัน แต่ใช้setStateภายในของการcomponentDidUpdateสร้างลูปที่ไม่มีที่สิ้นสุด (ซึ่งเห็นได้ชัด) ฉันพบวิธีแก้ปัญหาในการใช้getDOMNodeและการตั้งชื่อคลาสเป็นแบบเลื่อนลงโดยตรง แต่ฉันรู้สึกว่าควรมีวิธีแก้ปัญหาที่ดีกว่าโดยใช้เครื่องมือ React ใครสามารถช่วยฉัน? นี่คือส่วนหนึ่งของรหัสการทำงานด้วยgetDOMNode(ia ตรรกะการวางตำแหน่งที่ถูกละเลยเล็กน้อยเพื่อลดความซับซ้อนของรหัส) let SearchDropdown = React.createClass({ componentDidUpdate(params) { let el = this.getDOMNode(); el.classList.remove('dropDown-top'); if(needToMoveOnTop(el)) { el.top = newTopValue; el.right = newRightValue; el.classList.add('dropDown-top'); } }, render() { let dataFeed = this.props.dataFeed; return ( <DropDown > {dataFeed.map((data, i) => { return (<DropDownRow key={response.symbol} data={data}/>); …

133 javascript  reactjs  ecmascript-6 

ฉันได้สร้างส่วนประกอบใน React ซึ่งควรจะอัปเดตสไตล์ของตัวเองในการเลื่อนหน้าต่างเพื่อสร้างเอฟเฟกต์พารัลแลกซ์ renderวิธีส่วนประกอบมีลักษณะดังนี้: function() { let style = { transform: 'translateY(0px)' }; window.addEventListener('scroll', (event) => { let scrollTop = event.srcElement.body.scrollTop, itemTranslate = Math.min(0, scrollTop/3 - 60); style.transform = 'translateY(' + itemTranslate + 'px)'); }); return ( <div style={style}></div> ); } วิธีนี้ใช้ไม่ได้เนื่องจาก React ไม่ทราบว่าส่วนประกอบมีการเปลี่ยนแปลงดังนั้นองค์ประกอบจึงไม่ได้รับการแสดงผล ฉันได้ลองจัดเก็บค่าitemTranslateในสถานะของส่วนประกอบและเรียกsetStateในการเรียกกลับแบบเลื่อน อย่างไรก็ตามสิ่งนี้ทำให้การเลื่อนไม่สามารถใช้งานได้เนื่องจากช้ามาก ข้อเสนอแนะเกี่ยวกับวิธีการทำสิ่งนี้หรือไม่?

133 javascript  reactjs 

ฉันมีแอปพลิเคชัน react / redux ที่ดึงโทเค็นจากเซิร์ฟเวอร์ api หลังจากผู้ใช้ตรวจสอบสิทธิ์แล้วฉันต้องการให้คำขอ axios ทั้งหมดมีโทเค็นนั้นเป็นส่วนหัวการอนุญาตโดยไม่ต้องแนบด้วยตนเองกับทุกคำขอในการดำเนินการ ฉันค่อนข้างใหม่ในการตอบสนอง / redux และไม่แน่ใจในแนวทางที่ดีที่สุดและฉันไม่พบเพลงที่มีคุณภาพใด ๆ ใน Google นี่คือการตั้งค่า redux ของฉัน: // actions.js import axios from 'axios'; export function loginUser(props) { const url = `https://api.mydomain.com/login/`; const { email, password } = props; const request = axios.post(url, { email, password }); return { …

133 reactjs  redux  axios 

ฉันกำลังอ่านเกี่ยวกับFluxแต่ตัวอย่างแอป Todoนั้นง่ายเกินไปสำหรับฉันที่จะเข้าใจประเด็นสำคัญบางประการ ลองนึกภาพแอปหน้าเดียวเช่น Facebook ที่มีหน้าโปรไฟล์ของผู้ใช้ ในหน้าโปรไฟล์ผู้ใช้แต่ละหน้าเราต้องการแสดงข้อมูลผู้ใช้บางส่วนและโพสต์ล่าสุดของพวกเขาด้วยการเลื่อนที่ไม่สิ้นสุด เราสามารถนำทางจากโปรไฟล์ผู้ใช้หนึ่งไปยังอีกโปรไฟล์หนึ่งได้ ในสถาปัตยกรรม Flux สิ่งนี้จะสอดคล้องกับ Stores และ Dispatchers อย่างไร เราจะใช้หนึ่งคนPostStoreต่อผู้ใช้หรือเราจะมีร้านค้าระดับโลกบ้างไหม? แล้วผู้มอบหมายงานเราจะสร้างผู้มอบหมายงานใหม่สำหรับ "หน้าผู้ใช้" แต่ละหน้าหรือจะใช้ซิงเกิลตัน สุดท้ายส่วนใดของสถาปัตยกรรมที่รับผิดชอบในการจัดการวงจรชีวิตของร้านค้า“ เฉพาะเพจ” เพื่อตอบสนองต่อการเปลี่ยนแปลงเส้นทาง ยิ่งไปกว่านั้นหน้าหลอกหน้าเดียวอาจมีรายการข้อมูลประเภทเดียวกันหลายรายการ ยกตัวอย่างเช่นในหน้าโปรไฟล์ของผมต้องการที่จะแสดงทั้งติดตามและดังต่อไปนี้ Singleton สามารถUserStoreทำงานได้อย่างไรในกรณีนี้? จะUserPageStoreจัดการfollowedBy: UserStoreและfollows: UserStore?

132 javascript  facebook  architecture  reactjs  reactjs-flux 

ฉันใช้โมดูล react-router เวอร์ชันล่าสุดชื่อ react-router-dom ซึ่งกลายเป็นค่าเริ่มต้นเมื่อพัฒนาเว็บแอปพลิเคชันด้วย React ฉันต้องการทราบวิธีการเปลี่ยนเส้นทางหลังจากคำขอ POST ฉันกำลังสร้างรหัสนี้ แต่หลังจากขอแล้วก็ไม่มีอะไรเกิดขึ้น ฉันตรวจสอบบนเว็บ แต่ข้อมูลทั้งหมดเกี่ยวกับเราเตอร์การตอบสนองเวอร์ชันก่อนหน้าและไม่มีในการอัปเดตครั้งล่าสุด รหัส: import React, { PropTypes } from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import { Redirect } from 'react-router' import SignUpForm from '../../register/components/SignUpForm'; import styles from './PagesStyles.css'; import axios from 'axios'; import Footer …

132 javascript  reactjs  react-router 

ฉันกำลังพยายามเพิ่มองค์ประกอบ React map ในโปรเจ็กต์ของฉัน แต่พบข้อผิดพลาด ฉันใช้บล็อกโพสต์ของ Fullstack React เป็นข้อมูลอ้างอิง ฉันติดตามว่าข้อผิดพลาดเกิดขึ้นที่ไหนใน google_map.js บรรทัด 83: function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } นี่คือส่วนประกอบแผนที่ของฉันจนถึงตอนนี้ หน้าเว็บโหลดได้ดี (ไม่มีแผนที่) เมื่อฉันแสดงความคิดเห็นบรรทัดที่ 58-60 สามบรรทัดสุดท้าย แก้ไข: ฉันได้ทำการเปลี่ยนแปลงที่ @Dmitriy Nevzorov แนะนำและยังคงให้ข้อผิดพลาดเดิม import React from 'react' import GoogleApiComponent …

132 javascript  google-maps  reactjs  ecmascript-6  react-router 

ฉันกำลังพยายามหาวิธีที่ดีที่สุดในการลบองค์ประกอบออกจากอาร์เรย์ในสถานะขององค์ประกอบ เนื่องจากฉันไม่ควรแก้ไขthis.stateตัวแปรโดยตรงมีวิธีที่ดีกว่า (กระชับกว่า) ในการลบองค์ประกอบออกจากอาร์เรย์กว่าสิ่งที่ฉันมีที่นี่หรือไม่: onRemovePerson: function(index) { this.setState(prevState => { // pass callback in setState to avoid race condition let newData = prevState.data.slice() //copy array from prevState newData.splice(index, 1) // remove element return {data: newData} // update state }) }, ขอบคุณ. อัปเดต สิ่งนี้ได้รับการปรับปรุงเพื่อใช้โทรกลับใน setState สิ่งนี้ควรทำเมื่ออ้างอิงสถานะปัจจุบันขณะอัพเดต

131 javascript  reactjs