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

ฉันเขียนหลายสิบReactไฟล์ไม่เคยใช้componentDidUpdateวิธีการ มีตัวอย่างทั่วไปว่าเมื่อใดที่จำเป็นต้องใช้วิธีนี้? ฉันต้องการตัวอย่างในโลกแห่งความเป็นจริงไม่ใช่การสาธิตง่ายๆ ขอบคุณสำหรับคำตอบ!

110 reactjs 

มีวิธีการทราบเวอร์ชันรันไทม์ของ React ในเบราว์เซอร์หรือไม่?

110 javascript  reactjs 

ฉันมีไฟล์ test_stuff.js ที่ใช้งานอยู่ npm test ดูเหมือนว่า: import { assert } from 'assert'; import { MyProvider } from '../src/index'; import { React } from 'react'; const myProvider = ( <MyProvider> </MyProvider> ); describe('Array', function() { describe('#indexOf()', function() { it('should return -1 when the value is not present', function() { assert.equal(-1, [1,2,3].indexOf(4)); …

110 javascript  reactjs  npm  react-jsx 

เป็นไปได้หรือไม่ที่จะตรวจพบว่า React เวอร์ชันปัจจุบันกำลังพัฒนาหรือใช้งานจริงในขณะรันไทม์ ฉันต้องการทำสิ่งนี้: if (React.isDevelopment) { // Development thing } else { // Real thing }

110 javascript  reactjs 

ฉันค่อนข้างคลุมเครือกับแนวคิดเหล่านี้หากฉันสร้างแอป ToDo เดียวกันอย่างสมบูรณ์ใน AngularJS และ ReactJS - อะไรทำให้ React ToDo ใช้การผูกข้อมูลทางเดียวกับการผูกข้อมูลสองทางของ AngularJS ฉันเข้าใจว่า React ทำงานแบบนี้ การแสดงผล (ข้อมูล) ---> UI สิ่งนี้แตกต่างจาก Angular อย่างไร?

109 javascript  angularjs  reactjs 

ในขณะที่ฉันเขียน webpack.config.js เช่นนี้ module.exports = { entry: './index.jsx', output: { filename: 'bundle.js' }, module: { loaders: [{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } }] } }; และในindex.jsxฉันนำเข้าreactโมดูลApp import React from 'react'; import { render } from 'react-dom'; import App from './containers/App'; let rootElement = …

109 reactjs  webpack  webpack-dev-server 

โดยใช้วิธีการที่แนะนำ: นี่คือผลที่ได้: การเชื่อมโยงในปุ่ม , รหัสในระหว่างเส้นแสดงความคิดเห็น ฉันสงสัยว่ามีวิธีห่อLinkองค์ประกอบจาก'react-router'ในbuttonแท็กHTML โดยใช้ react หรือไม่ ขณะนี้ฉันมีLinkส่วนประกอบสำหรับนำทางหน้าต่างๆในแอปของฉัน แต่ฉันต้องการแมปฟังก์ชันนั้นกับปุ่ม HTML

109 html  reactjs  button  hyperlink  router 

ฉันคิดและสับสนกับการกำหนดเส้นทางระหว่างไคลเอนต์และเซิร์ฟเวอร์ สมมติว่าฉันใช้ ReactJS สำหรับการแสดงผลฝั่งเซิร์ฟเวอร์ก่อนที่จะส่งคำขอกลับไปที่เว็บเบราว์เซอร์และใช้ react-router เป็นเส้นทางฝั่งไคลเอ็นต์เพื่อสลับระหว่างเพจโดยไม่ต้องรีเฟรชเป็น SPA สิ่งที่อยู่ในใจคือ: เส้นทางตีความอย่างไร? ตัวอย่างเช่นคำขอจากหน้าแรก ( /home) ไปยังหน้าโพสต์ ( /posts) การกำหนดเส้นทางไปที่ใดบนฝั่งเซิร์ฟเวอร์หรือไคลเอนต์ มันรู้ได้อย่างไรว่ามันถูกประมวลผลอย่างไร?

108 javascript  reactjs  routes  react-router  url-routing 

เว็บแอปตอบสนองของฉันให้ข้อผิดพลาดนี้ในคอนโซลเบราว์เซอร์ Refused to load the font 'data:font/woff;base64,d09........' because it` `violates the following Content Security Policy directive: "default-src` `'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback. นอกจากนี้: Refused to connect to 'ws://localhost:3000/sockjs-node/782/oawzy1fx/websocket' because it violates the following Content Security Policy directive: "default-src 'self'". Note …

108 javascript  reactjs  webpack 

ฉันกำลังแสดงรายการโพสต์ สำหรับแต่ละโพสต์ฉันต้องการแสดงผลแท็กจุดยึดที่มีรหัสโพสต์เป็นส่วนหนึ่งของสตริง href render: function(){ return ( <ul> { this.props.posts.map(function(post){ return <li key={post.id}><a href='/posts/'{post.id}>{post.title}</a></li> }) } </ul> ); ฉันจะทำยังไงเพื่อให้แต่ละโพสต์มีของ href ของ/posts/1, /posts/2etc?

108 javascript  reactjs 

นี่คือสถานการณ์ของฉัน: บน this.handleFormSubmit () ฉันกำลังดำเนินการ this.setState () ภายใน this.handleFormSubmit () ฉันกำลังเรียกสิ่งนี้ว่า findRoutes (); - ซึ่งขึ้นอยู่กับความสำเร็จของ this.setState () this.setState (); ไม่เสร็จสมบูรณ์ก่อนหน้านี้ findRoutes เรียกว่า ... ฉันจะรอให้ this.setState () ใน this.handleFormSubmit () เสร็จสิ้นก่อนที่จะเรียก this.findRoutes () ได้อย่างไร โซลูชันย่อย: วาง this.findRoutes () ใน componentDidUpdate () สิ่งนี้ไม่สามารถยอมรับได้เนื่องจากจะมีการเปลี่ยนแปลงสถานะอื่น ๆ ที่ไม่เกี่ยวข้องกับฟังก์ชัน findRoutes () ฉันไม่ต้องการเรียกใช้ฟังก์ชัน findRoutes () เมื่อมีการอัปเดตสถานะที่ไม่เกี่ยวข้อง โปรดดูข้อมูลโค้ดด้านล่าง: …

108 javascript  reactjs  state 

ฉันได้ติดตั้งeslint-config-airbnbที่ควรกำหนดค่าล่วงหน้า ESLINT สำหรับ React: การส่งออกเริ่มต้นของเราประกอบด้วยกฎ ESLint ทั้งหมดของเรารวมถึง ECMAScript 6+ และ React ต้องใช้ eslint, eslint-plugin-import, eslint-plugin-react และ eslint-plugin-jsx-a11y การ.eslintrcขยายการกำหนดค่าของฉัน: { "extends": "eslint-config-airbnb", "env": { "browser": true, "node": true, "mocha": true }, "rules": { "new-cap": [2, { "capIsNewExceptions": ["List", "Map", "Set"] }], "react/no-multi-comp": 0, "import/default": 0, "import/no-duplicates": 0, "import/named": 0, "import/namespace": 0, …

108 javascript  reactjs  eslint  eslint-config-airbnb 

ส่วนประกอบที่ควบคุมและส่วนประกอบที่ไม่มีการควบคุมใน ReactJS คืออะไร? พวกเขาแตกต่างจากกันอย่างไร?

108 reactjs  react-component 

เมื่อใดก็ตามที่ฉันพยายามใช้ไอคอน Font Awesome ใน React render()มันจะไม่ปรากฏบนหน้าเว็บที่ได้แม้ว่ามันจะทำงานใน HTML ปกติก็ตาม render: function() { return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>; } นี่คือตัวอย่างสด: http://jsfiddle.net/pLWS3/ มีความผิดตรงไหน?

108 reactjs  font-awesome 

ปิด . คำถามนี้จะต้องมีมากขึ้นมุ่งเน้น ขณะนี้ยังไม่ยอมรับคำตอบ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เน้นไปที่ปัญหาเดียวโดยแก้ไขโพสต์นี้เท่านั้น ปิดให้บริการใน3 ปีที่ผ่านมา ปรับปรุงคำถามนี้ ฉันยังใหม่กับ React / Redux ฉันใช้มิดเดิลแวร์ของ API ดึงข้อมูลในแอป Redux เพื่อประมวลผล API มันคือ ( redux-api-middleware ) ฉันคิดว่าเป็นวิธีที่ดีในการประมวลผลการดำเนินการ async api แต่ฉันพบบางกรณีที่ไม่สามารถแก้ไขได้ด้วยตัวเอง ดังที่หน้าแรก ( Lifecycle ) กล่าวว่าวงจรการดึงข้อมูล API เริ่มต้นด้วยการส่งการดำเนินการ CALL_API ลงท้ายด้วยการส่งการดำเนินการ FSA ดังนั้นกรณีแรกของฉันแสดง / ซ่อนตัวโหลดล่วงหน้าเมื่อดึง API มิดเดิลแวร์จะส่งการดำเนินการ FSA ที่จุดเริ่มต้นและส่งการดำเนินการ FSA ในตอนท้าย การดำเนินการทั้งสองได้รับโดยตัวลดซึ่งควรดำเนินการประมวลผลข้อมูลตามปกติเท่านั้น ไม่มีการใช้งาน UI ไม่มีการดำเนินการอีกต่อไป …

107 javascript  reactjs  redux