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

ฉันกำลังลองทุกวิธีในการสร้างแอปพลิเคชันการตอบสนอง ฉันได้ลองใช้ maven แล้วและตอนนี้ฉันกำลังลองใช้ระบบสร้างแอป crate-react-app จาก Facebook Incubators เมื่อฉันพยายามรันคำสั่งcreate-react-app my-appในสภาพแวดล้อม npm มันทำงานบนระบบส่วนบุคคลของฉันโดยไม่มีปัญหา แต่เมื่อฉันลองใช้คำสั่งเดียวกันในสภาพแวดล้อมการทำงานของฉันฉันพบกับข้อผิดพลาดนี้ในพรอมต์คำสั่ง npm ERR! node v6.10.2 npm ERR! npm v3.10.10 npm ERR! code UNABLE_TO_GET_ISSUER_CERT_LOCALLY npm ERR! unable to get local issuer certificate npm ERR! npm ERR! If you need help, you may report this error at: npm ERR! <https://github.com/npm/npm/issues>

118 node.js  reactjs  npm  create-react-app 

ในฐานะผู้เริ่มต้นสู่โลกแห่ง React ฉันต้องการทำความเข้าใจในเชิงลึกว่าเกิดอะไรขึ้นเมื่อฉันใช้{this.props.children}และสถานการณ์ที่จะใช้เหมือนกันคืออะไร ความเกี่ยวข้องของมันในข้อมูลโค้ดด้านล่างคืออะไร? render() { if (this.props.appLoaded) { return ( <div> <Header appName={this.props.appName} currentUser={this.props.currentUser} /> {this.props.children} </div> ); } }

118 javascript  reactjs  react-redux  frontend 

ฉันมีผลข้างเคียงที่จะนำไปใช้และต้องการทราบวิธีจัดระเบียบ: เป็นการใช้งานครั้งเดียว หรือใช้หลายอย่าง อะไรที่ดีกว่าในแง่ของประสิทธิภาพและสถาปัตยกรรม?

118 reactjs  react-hooks 

เมื่อฉันรันreact-native run-iosบิลด์สำเร็จ แต่ฉันได้รับข้อผิดพลาดด้านล่าง ฉันตรวจสอบทุกที่แล้ว แต่ดูเหมือนจะไม่มีอะไรทำงาน การใช้sudoหน้าคำสั่งก็ไม่ช่วยเช่นกัน ฉันใช้ Xcode 7.3, react-native-cli: 0.2.0, react-native: 0.24.1, node v5.11.0 === BUILD TARGET mobileTests OF PROJECT mobile WITH CONFIGURATION Release === Check dependencies ** BUILD SUCCEEDED ** Installing build/Build/Products/Debug-iphonesimulator/mobile.app An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2): Failed to install the requested application An …

117 ios  reactjs  react-native 

ฉันกำลังสร้างแอปที่ใช้ webpack-dev-server ในการพัฒนาควบคู่ไปกับ react-router ดูเหมือนว่า webpack-dev-server ถูกสร้างขึ้นจากสมมติฐานที่ว่าคุณจะมีจุดเข้าสาธารณะในที่เดียว (เช่น "/") ในขณะที่ react-router อนุญาตให้มีจุดเข้าได้ไม่ จำกัด จำนวน ฉันต้องการประโยชน์ของ webpack-dev-server โดยเฉพาะอย่างยิ่งคุณสมบัติการรีโหลดใหม่ที่ยอดเยี่ยมสำหรับการทำงาน แต่ฉันยังต้องการโหลดเส้นทางที่ตั้งไว้ใน react-router เราจะนำมันไปใช้งานร่วมกันได้อย่างไร? คุณสามารถเรียกใช้เซิร์ฟเวอร์ด่วนที่ด้านหน้าของ webpack-dev-server เพื่ออนุญาตสิ่งนี้ได้หรือไม่?

117 javascript  reactjs  webpack  react-router 

ฉันเพิ่งติดตั้ง node.js & cli ติดตั้ง node.js ติดตั้ง react-native-cli npm -g react-native-cli และสร้าง 'โครงการใหม่' react-native init new_project และภายในไดเร็กทอรี 'new_project' นั้นฉันเบื่อที่จะดูว่าเมโทรบันเดิลทำงานได้ดีหรือไม่ react-native start แต่คำสั่งทำให้ฉันมีข้อผิดพลาดต่อไปนี้และรถไฟใต้ดินไม่เริ่มทำงาน มีเงื่อนงำในการแก้ไขข้อผิดพลาดนี้หรือไม่? (ฉันใช้ windows 10 OS) คำสั่ง: C:\projects\new_proj>react-native start error นิพจน์ทั่วไปไม่ถูกต้อง: /(.\fixtures.|node_modules[]react[]dist[].|website\node_modules.|heapCapture\bundle.js|.\tests.)$/: คลาสอักขระที่ไม่สิ้นสุด เรียกใช้ CLI ด้วย --verbose flag สำหรับรายละเอียดเพิ่มเติม SyntaxError: นิพจน์ทั่วไปไม่ถูกต้อง: /(.\fixtures.|node_modules[]react[]dist[].|website\node_modules.|heapCapture\bundle.js|.\tests.)$/: คลาสอักขระที่ไม่สิ้นสุดที่ RegExp ใหม่ ( ) ที่บัญชีดำ (D: …

117 reactjs  react-native  react-native-android  react-native-cli  metro-bundler 

ในขณะที่ฉันกำลังตั้งค่า React ภายในโครงการ Django ฉันพบข้อผิดพลาดนี้ ModuleBuildError ในการสร้างโมดูลล้มเหลว (จาก ./node_modules/babel-loader/lib/index.js): SyntaxError: C: \ Users \ 1Sun \ Cebula3 \ cebula_react \ assets \ js \ index.js: การสนับสนุนสำหรับคลาสคุณสมบัติของไวยากรณ์ทดลอง 'ยังไม่ได้เปิดใช้งาน (17: 9): 15 | 16 | class BodyPartWrapper extends Component { > 17 | state = { | ^ 18 | 19 | …

117 reactjs  webpack  babeljs  babel 

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

117 reactjs  javascript-globalize 

ฉันได้รับข้อผิดพลาดต่อไปนี้เมื่อพยายามเรียกใช้แอป React ของฉัน: ./src/components/App/App.js ข้อผิดพลาดในการนำเข้าที่พยายาม: 'combinationReducers' ไม่ได้ถูกส่งออกจาก '../../store/reducers/' นี่คือวิธีที่ฉันส่งออกcombineReducers: import { combineReducers } from 'redux'; import userReducers from './userReducers'; import articleReducers from './articleReducers'; export default combineReducers({ userReducers, articleReducers }); และนี่คือวิธีการนำเข้าในApp.js: import { combineReducers } from '../../store/reducers'; อะไรที่ไม่ถูกต้องในวิธีการที่ฉันส่งออกcombineReducers?

117 reactjs  redux 

ฉันใช้แอปสร้างปฏิกิริยาเพื่อบูตแอปของฉัน ฉันได้เพิ่มสอง.envไฟล์.env.developmentและ.env.productionในรูท ของฉัน.env.developmentรวมถึง: API_URL=http://localhost:3000/api CALLBACK_URL=http://localhost:3005/callback เมื่อฉันเรียกใช้แอปของฉันโดยใช้react-scripts startและคอนโซลprocess.envมันจะพ่นออก { NODE_ENV: "development", PUBLIC_URL: "" } ฉันได้ลองสิ่งต่างๆแล้ว แต่มันไม่ได้รับข้อมูลที่สามารถตรวจสอบได้ในไฟล์การพัฒนาของฉันฉันทำอะไรผิด?! โครงสร้าง Directry คือ: /.env.development /src/index.js สคริปต์ Package.json คือ: "start": "export PORT=3005; npm-run-all --parallel server:start client:start", "client:start": "export PORT=3005; react-scripts start", "server:start": "node server.js", "build": "react-scripts build", แก้ไข: @jamcreencia ชี้ให้เห็นอย่างถูกต้องว่าตัวแปรของฉันควรขึ้นต้นด้วยREACT_APP. แก้ไข 2 ใช้งานได้ดีถ้าฉันตั้งชื่อไฟล์.envแต่ไม่ใช่ถ้าฉันใช้.env.developmentหรือ.end.production

117 reactjs  create-react-app 

ฉันเริ่มใช้ Facebook React ในโครงการ Backbone และจนถึงตอนนี้มันก็ไปได้ดี อย่างไรก็ตามฉันสังเกตเห็นความซ้ำซ้อนบางอย่างที่คืบคลานเข้ามาในรหัสการตอบสนองของฉัน ยกตัวอย่างเช่นผมมีวิดเจ็ตแบบฟอร์มเหมือนหลายกับรัฐชอบINITIAL, และSENDING SENTเมื่อกดปุ่มฟอร์มจะต้องได้รับการตรวจสอบความถูกต้องมีการร้องขอและจากนั้นสถานะจะถูกอัพเดต สถานะถูกเก็บไว้ใน React this.stateแน่นอนพร้อมกับค่าฟิลด์ ถ้าสิ่งเหล่านี้เป็นมุมมอง Backbone ฉันจะดึงคลาสพื้นฐานที่เรียกว่าFormViewแต่ความประทับใจของฉันคือ React ไม่รับรองหรือสนับสนุนคลาสย่อยเพื่อแชร์ตรรกะมุมมอง (แก้ไขฉันถ้าฉันผิด) ฉันเคยเห็นสองวิธีในการใช้โค้ดซ้ำใน React: Mixins (เช่นLinkedStateMixinที่มาพร้อมกับ React); ส่วนประกอบของคอนเทนเนอร์ (เช่นreact-infinite-scroll ) ฉันถูกต้องหรือไม่ที่ mixins และ container ต้องการสืบทอดใน React? นี่เป็นการตัดสินใจออกแบบโดยเจตนาหรือไม่? การใช้มิกซ์อินหรือส่วนประกอบคอนเทนเนอร์สำหรับตัวอย่าง "วิดเจ็ตฟอร์ม" จากย่อหน้าที่สองเหมาะสมกว่าไหม และนี่ก็เป็นส่วนสำคัญที่มีFeedbackWidgetและJoinWidgetอยู่ในสภาพปัจจุบันของพวกเขา พวกเขามีโครงสร้างที่คล้ายกันbeginSendวิธีการที่คล้ายกันและทั้งสองจะต้องมีการสนับสนุนการตรวจสอบความถูกต้อง (ยังไม่มี)

116 javascript  refactoring  mixins  reactjs 

ฉันเริ่มต้นด้วย React.js และฉันต้องการทำแบบฟอร์มง่ายๆ แต่ในเอกสารฉันพบสองวิธีในการทำ อันแรกใช้Refs : var CommentForm = React.createClass({ handleSubmit: function(e) { e.preventDefault(); var author = React.findDOMNode(this.refs.author).value.trim(); var text = React.findDOMNode(this.refs.text).value.trim(); if (!text || !author) { return; } // TODO: send request to the server React.findDOMNode(this.refs.author).value = ''; React.findDOMNode(this.refs.text).value = ''; return; }, render: function() { return ( <form …

116 reactjs 

นี่คือส่วนประกอบพื้นฐาน ทั้งฟังก์ชัน onClick <ul>และ<li>มี ฉันต้องการเฉพาะ onClick บน<li>ไฟไม่ใช่<ul>. ฉันจะบรรลุเป้าหมายนี้ได้อย่างไร? ฉันเล่นกับ e.preventDefault (), e.stopPropagation () ไปแล้ว class List extends React.Component { constructor(props) { super(props); } handleClick() { // do something } render() { return ( <ul onClick={(e) => { console.log('parent'); this.handleClick(); }} > <li onClick={(e) => { console.log('child'); // prevent default? prevent …

116 reactjs  onclick  event-propagation 

ฉันใช้ส่วนประกอบเดียวกันสำหรับเส้นทางที่แตกต่างกันสามเส้นทาง: <Router> <Route path="/home" component={Home} /> <Route path="/users" component={Home} /> <Route path="/widgets" component={Home} /> </Router> มีการรวมเข้าด้วยกันหรือไม่เพื่อให้เป็นดังนี้: <Router> <Route path=["/home", "/users", "/widgets"] component={Home} /> </Router>

116 javascript  reactjs  path  react-router  url-routing 

บางครั้ง ฉันเคยเห็นคนห่อส่วนประกอบของพวกเขาwithRouterเมื่อพวกเขาส่งออก: import { withRouter } from 'react-router-dom'; class Foo extends React.Component { // ... } export default withRouter(Foo); สิ่งนี้มีไว้เพื่ออะไรและควรใช้เมื่อใด

116 reactjs  react-router