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

เนื่องจากฉันใช้ react-router เพื่อจัดการเส้นทางของฉันในแอป react ฉันจึงสงสัยว่ามีวิธีเปลี่ยนเส้นทางไปยังทรัพยากรภายนอกหรือไม่ พูดว่ามีคนฮิต: example.com/privacy-policy ฉันต้องการให้เปลี่ยนเส้นทางไปที่: example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies ฉันพบว่าไม่มีความช่วยเหลือในการหลีกเลี่ยงการเขียนเป็น JS ธรรมดาที่การโหลด index.html ของฉันด้วยสิ่งที่ต้องการ: if ( window.location.path === "privacy-policy" ){ window.location = "example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies" }

125 javascript  reactjs  redirect  react-router  react-router-redux 

ฉันต้องการตั้งชื่อเอกสาร (ในแถบชื่อเรื่องของเบราว์เซอร์) สำหรับแอปพลิเคชัน React ของฉัน ฉันได้ลองใช้react-document-title (ดูเหมือนล้าสมัย) และการตั้งค่าdocument.titleในconstructorและcomponentDidMount()- ไม่มีวิธีแก้ปัญหาเหล่านี้

125 javascript  reactjs  dom 

ฉันเป็นมือใหม่ javascript / redux / react ที่สร้างแอปพลิเคชั่นขนาดเล็กที่มี redux, react-redux และ react ด้วยเหตุผลบางประการเมื่อใช้ฟังก์ชัน mapDispatchToProps ควบคู่กับการเชื่อมต่อ (การเชื่อมต่อแบบ react-redux) ฉันได้รับ TypeError ซึ่งระบุว่าการจัดส่งไม่ใช่ฟังก์ชันเมื่อฉันพยายามเรียกใช้ prop ที่เป็นผลลัพธ์ อย่างไรก็ตามเมื่อฉันเรียกการจัดส่งเป็นเสา (ดูฟังก์ชัน setAddr ในรหัสที่ให้มา) มันใช้งานได้ ฉันสงสัยว่าทำไมจึงเป็นเช่นนี้ในตัวอย่างแอป TODO ในเอกสาร redux เมธอด mapDispatchToProps ได้รับการตั้งค่าในลักษณะเดียวกัน เมื่อฉัน console.log (จัดส่ง) ภายในฟังก์ชันมันจะบอกว่าการจัดส่งเป็นวัตถุประเภท ฉันสามารถใช้การจัดส่งด้วยวิธีนี้ต่อไปได้ แต่ฉันจะรู้สึกดีขึ้นเมื่อทราบว่าเหตุใดจึงเกิดขึ้นก่อนที่จะดำเนินการต่อด้วย redux ฉันใช้ webpack กับ babel-loaders เพื่อรวบรวม รหัสของฉัน: import React, { PropTypes, …

124 javascript  reactjs  redux  react-redux 

ใครช่วยบอกหน่อยได้ไหมว่าฉันจะกลับไปที่หน้าที่แล้วแทนที่จะเป็นเส้นทางที่เจาะจงได้อย่างไร เมื่อใช้รหัสนี้: var BackButton = React.createClass({ mixins: [Router.Navigation], render: function() { return ( <button className="button icon-left" onClick={this.navigateBack}> Back </button> ); }, navigateBack: function(){ this.goBack(); } }); รับข้อผิดพลาดนี้goBack () ถูกละเว้นเนื่องจากไม่มีประวัติเราเตอร์ นี่คือเส้นทางของฉัน: // Routing Components Route = Router.Route; RouteHandler = Router.RouteHandler; DefaultRoute = Router.DefaultRoute; var routes = ( <Route name="app" path="/" handler={OurSchoolsApp}> …

124 javascript  reactjs  react-router 

ทั้งสองมีเส้นทางเชื่อมโยง ฯลฯ เมื่อใดควรใช้อย่างใดอย่างหนึ่ง ฉันสับสนจริงๆว่าจะใช้แต่ละอันได้ที่ไหน ฝั่งเซิร์ฟเวอร์? ด้านลูกค้า? https://reacttraining.com/react-router/ ในบางตัวอย่างคุณต้องส่งประวัติ แต่อย่างอื่นไม่ได้ จะทำอย่างไร? <Router history={browserHistory}> VS <Router> มันสับสนจริงๆว่าเมื่อใดควรใช้อย่างใดอย่างหนึ่งความช่วยเหลือใด ๆ ที่ชื่นชม

124 reactjs  react-router 

โค้ดต่อไปนี้สามารถพบได้ในตัวอย่างจริงนี้ ฉันมีองค์ประกอบพื้นเมืองตอบสนองต่อไปนี้: 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View style={styles.container}> <View style={styles.descriptionContainerVer}> <View style={styles.descriptionContainerHor}> <Text style={styles.descriptionText} numberOfLines={5} > Here is a really long text that you can do nothing about, its gonna …

124 css  reactjs  react-native  flexbox 

สมมติว่าฉันมีสถานะบางอย่างที่ขึ้นอยู่กับสถานะอื่น (เช่นเมื่อ A เปลี่ยนแปลงฉันต้องการให้ B เปลี่ยน) เหมาะสมหรือไม่ที่จะสร้างตะขอที่สังเกตเห็น A และตั้งค่า B ไว้ในตะขอ useEffect เอฟเฟกต์จะเรียงซ้อนเช่นนั้นหรือไม่เมื่อฉันคลิกปุ่มเอฟเฟกต์แรกจะเริ่มทำงานทำให้ b เปลี่ยนไปทำให้เอฟเฟกต์ที่สองเริ่มทำงานก่อนการเรนเดอร์ถัดไป มีข้อเสียด้านประสิทธิภาพในการจัดโครงสร้างโค้ดเช่นนี้หรือไม่? let MyComponent = props => { let [a, setA] = useState(1) let [b, setB] = useState(2) useEffect( () => { if (/*some stuff is true*/) { setB(3) } }, [a], ) useEffect( () => …

124 javascript  reactjs  react-hooks 

ผมทำงานด้วยและมาข้ามปัญหานี้ที่ผมได้รับcreate-react-appHome does not contain an export named Home วิธีตั้งค่าApp.jsไฟล์มีดังนี้ import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import { Home } from './layouts/Home' class App extends Component { render() { return ( <div className="App"> Hello <Home /> </div> ) } } export default App; ตอนนี้ในlayoutsโฟลเดอร์ของฉันฉันมีHome.jsไฟล์ …

123 javascript  reactjs  ecmascript-6  create-react-app 

ฉันจะเข้าถึงสถานะ redux ภายในฟังก์ชัน saga ได้อย่างไร คำตอบสั้น ๆ : import { select } from 'redux-saga/effects'; ... let data = yield select(stateSelectorFunction);

123 javascript  reactjs  redux  react-redux  redux-saga 

การใช้React.PropTypesแอปพลิเคชัน TypeScript React มีความหมายหรือไม่หรือเป็นเพียงกรณีของ "เข็มขัดและสายรัด" เนื่องจากคลาสคอมโพเนนต์ถูกประกาศด้วยPropsพารามิเตอร์ type: interface Props { // ... } export class MyComponent extends React.Component<Props, any> { ... } มีประโยชน์ที่แท้จริงในการเพิ่ม static propTypes { myProp: React.PropTypes.string } นิยามคลาส?

123 reactjs  typescript  react-proptypes 

ฉันกำลังสร้างแอปตอบสนองขนาดเล็กและรูปภาพในเครื่องของฉันไม่โหลด ภาพเหมือนplacehold.it/200x200โหลด ฉันคิดว่ามันอาจจะเป็นอะไรบางอย่างกับเซิร์ฟเวอร์? นี่คือ App.js ของฉัน import React, { Component } from 'react'; class App extends Component { render() { return ( <div className="home-container"> <div className="home-content"> <div className="home-text"> <h1>foo</h1> </div> <div className="home-arrow"> <p className="arrow-text"> Vzdělání </p> <img src={"/images/resto.png"} /> </div> </div> </div> ); } } export default App; ดัชนี js: …

123 javascript  reactjs 

ฉันได้รับข้อผิดพลาดด้านล่างเมื่อใดก็ตามที่ฉันพยายามใช้makeStyles()กับส่วนประกอบด้วยวิธีวงจรชีวิต: สายเบ็ดไม่ถูกต้อง ตะขอสามารถเรียกได้เฉพาะภายในร่างกายของส่วนประกอบฟังก์ชันเท่านั้น สิ่งนี้อาจเกิดขึ้นจากสาเหตุใดสาเหตุหนึ่งต่อไปนี้: คุณอาจมีเวอร์ชันของ React และ renderer ที่ไม่ตรงกัน (เช่น React DOM) คุณอาจทำผิดกฎของ Hooks คุณอาจมี React มากกว่าหนึ่งสำเนาในแอปเดียวกัน ด้านล่างนี้เป็นตัวอย่างโค้ดเล็กน้อยที่ทำให้เกิดข้อผิดพลาดนี้ ตัวอย่างอื่น ๆ กำหนดชั้นเรียนให้กับรายการย่อยเช่นกัน ฉันไม่พบสิ่งใดในเอกสารของ MUI ที่แสดงวิธีอื่น ๆ ในการใช้งานmakeStylesและมีความสามารถในการใช้วิธีการตลอดอายุการใช้งาน import React, { Component } from 'react'; import { Redirect } from 'react-router-dom'; import { Container, makeStyles } from '@material-ui/core'; import LogoButtonCard from '../molecules/Cards/LogoButtonCard'; …

123 reactjs  material-ui 

หากร้านค้ารักษาสถานะของตัวเองและมีความสามารถในการเรียกใช้บริการเครือข่ายและการจัดเก็บข้อมูลในการดำเนินการดังกล่าว ... ในกรณีนี้การกระทำเป็นเพียงผู้ส่งข้อความที่โง่เขลา -หรือ- ... ร้านค้าควรเป็นผู้รับข้อมูลที่ไม่เปลี่ยนรูปแบบเป็นใบ้จากการดำเนินการ (และการดำเนินการเป็นข้อมูลที่ดึง / ส่งข้อมูลระหว่างแหล่งภายนอกหรือไม่การจัดเก็บในอินสแตนซ์นี้จะทำหน้าที่เป็นมุมมองแบบจำลองและจะสามารถรวม / กรองข้อมูลได้ ข้อมูลก่อนที่จะตั้งฐานสถานะของตนเองบนข้อมูลที่ไม่เปลี่ยนรูปที่ถูกป้อนโดยการกระทำ สำหรับฉันแล้วดูเหมือนว่ามันควรจะเป็นอย่างใดอย่างหนึ่ง (แทนที่จะผสมทั้งสองอย่าง) ถ้าเป็นเช่นนั้นเหตุใดจึงเป็นที่ต้องการ / แนะนำมากกว่าอีกรายการหนึ่ง?

122 reactjs  reactjs-flux 

ฉันได้เล่นกับ React และจนถึงตอนนี้ฉันชอบมันมาก ฉันกำลังสร้างแอปด้วย NodeJS และต้องการใช้ React สำหรับส่วนประกอบแบบโต้ตอบบางส่วนในแอปพลิเคชัน ฉันไม่ต้องการให้เป็นแอปหน้าเดียว ฉันยังไม่พบสิ่งใดในเว็บที่ตอบคำถามต่อไปนี้: ฉันจะแยกหรือรวมส่วนประกอบการตอบสนองของฉันในแอปแบบหลายหน้าได้อย่างไร ขณะนี้ส่วนประกอบทั้งหมดของฉันอยู่ในไฟล์เดียวแม้ว่าฉันจะไม่เคยโหลดเลยในบางส่วนของแอป จนถึงตอนนี้ฉันกำลังพยายามใช้คำสั่งเงื่อนไขในการแสดงผลส่วนประกอบโดยค้นหา ID ของคอนเทนเนอร์ที่ React จะแสดงผล ฉันไม่แน่ใจ 100% ว่าแนวทางปฏิบัติที่ดีที่สุดคืออะไรกับ React มันจะเป็นแบบนี้ if(document.getElementById('a-compenent-in-page-1')) { React.render( <AnimalBox url="/api/birds" />, document.getElementById('a-compenent-in-page-1') ); } if(document.getElementById('a-compenent-in-page-2')) { React.render( <AnimalBox url="/api/cats" />, document.getElementById('a-compenent-in-page-2') ); } if(document.getElementById('a-compenent-in-page-3')) { React.render( <AnimalSearchBox url="/api/search/:term" />, document.getElementById('a-compenent-in-page-3') ); } ฉันยังคงอ่านเอกสารและไม่พบสิ่งที่ต้องการสำหรับแอปหลายหน้า …

122 javascript  node.js  reactjs 

ใน react.js ควรเก็บการอ้างอิงการหมดเวลาเป็นตัวแปรอินสแตนซ์ (this.timeout) หรือตัวแปรสถานะ (this.state.timeout) ดีกว่าไหม React.createClass({ handleEnter: function () { // Open a new one after a delay var self = this; this.timeout = setTimeout(function () { self.openWidget(); }, DELAY); }, handleLeave: function () { // Clear the timeout for opening the widget clearTimeout(this.timeout); } ... }) หรือ …

122 javascript  reactjs