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

ฉันใช้สร้างปฏิกิริยาแอปejectและไม่ต้องการที่จะ ไม่ชัดเจนว่าที่ใดที่ฟอนต์ที่นำเข้าผ่าน @ font-face และโหลดแบบโลคัลควรดำเนินการ คือฉันกำลังโหลด @font-face { font-family: 'Myriad Pro Regular'; font-style: normal; font-weight: normal; src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff'); } ข้อเสนอแนะใด ๆ - แก้ไข รวมถึงส่วนสำคัญที่ Dan อ้างถึงในคำตอบของเขา ➜ Client git:(feature/trivia-game-ui-2) ✗ ls -l public/static/fonts total 1168 -rwxr-xr-x@ 1 maximveksler staff 62676 Mar 17 2014 MYRIADPRO-BOLD.woff -rwxr-xr-x@ 1 …

177 css  reactjs  fonts  webpack  create-react-app 

ฉันทำงานกับโครงการ React โดยใช้create-react-appและฉันมีสองตัวเลือกในการเริ่มต้นโครงการ: วิธีแรก: npm run startด้วยคำจำกัดความที่เป็นpackage.jsonเช่นนี้: "start": "react-scripts start", วิธีที่สอง: npm start ความแตกต่างระหว่างสองคำสั่งเหล่านี้คืออะไร? และวัตถุประสงค์ของการreact-scripts startคืออะไร? ฉันพยายามค้นหาคำจำกัดความ แต่ฉันเพิ่งพบแพ็คเกจด้วยชื่อนี้ ฉันยังไม่รู้ว่าการใช้คำสั่งนี้คืออะไร

177 reactjs  npm 

ฉันใช้เป็นสภาพแวดล้อม Cloud9.io อูบุนตู VM Online IDE และฉันได้ลดลงโดยการแก้ไขปัญหาข้อผิดพลาดนี้เพียงแค่เรียกใช้แอปกับเซิร์ฟเวอร์ Webpack dev ฉันเปิดตัวด้วย: webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT $ IP เป็นตัวแปรที่มีที่อยู่โฮสต์ $ PORT มีหมายเลขพอร์ต ฉันได้รับคำสั่งให้ใช้ vars เหล่านี้เมื่อปรับใช้แอพใน Cloud 9 เนื่องจากมีข้อมูล IP และ PORT เริ่มต้น เซิร์ฟเวอร์บูทและคอมไพล์รหัสไม่มีปัญหาไม่ใช่แสดงไฟล์ดัชนีให้ฉันเลย หน้าจอว่างเปล่าที่มีข้อความ "Invalid Host header" เป็นข้อความ นี่คือคำขอ: GET / HTTP/1.1 Host: store-client-nestroia1.c9users.io Connection: keep-alive Pragma: no-cache …

176 reactjs  webpack-dev-server  cloud9-ide  cloud9 

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

176 reactjs  reactjs-flux 

ในเอกสารทางการของ React ที่กล่าวถึง - หากคุณคุ้นเคยกับวิธีวงจรชีวิตของคลาส React คุณสามารถคิดถึง useEffect Hook เป็น componentDidMount, componentDidUpdate และ componentWillUnmount รวมกัน คำถามของฉันคือ - เราจะใช้componentWillMount()วิธี lifecyle ในเบ็ดได้อย่างไร

176 javascript  reactjs  jsx  react-hooks 

ฉันใหม่สำหรับ React JS (เหมือนเพิ่งเริ่มวันนี้) ฉันไม่ค่อยเข้าใจว่า setState ทำงานอย่างไร ฉันกำลังรวม React และ Easel JS เพื่อวาดกริดตามอินพุตของผู้ใช้ นี่คือถัง JS ของฉัน: http://jsbin.com/zatula/edit?js,output นี่คือรหัส: var stage; var Grid = React.createClass({ getInitialState: function() { return { rows: 10, cols: 10 } }, componentDidMount: function () { this.drawGrid(); }, drawGrid: function() { stage = new createjs.Stage("canvas"); var rectangles …

174 javascript  reactjs  setstate 

ฉันสร้างโครงการ ReactJS ด้วยcreate-react-appแพ็คเกจและใช้งานได้ดี แต่ฉันไม่สามารถค้นหาไฟล์และการกำหนดค่าของwebpack ได้ react-create-app ทำงานกับ webpack อย่างไร ไฟล์การกำหนดค่า webpack อยู่ที่ไหนในการติดตั้งเริ่มต้นด้วยcreate-react-app? ฉันไม่พบไฟล์การกำหนดค่าในโฟลเดอร์ของโครงการ ฉันยังไม่ได้สร้างไฟล์ปรับแต่งแทนที่ ฉันสามารถจัดการการตั้งค่าคอนฟิเกอเรชันกับบทความอื่น ๆ แต่ฉันต้องการค้นหาไฟล์ปรับแต่งแบบธรรมดา

174 javascript  reactjs  webpack  ecmascript-6  create-react-app 

มี "เบื้องหลัง" ความแตกต่างจากการตั้งค่า innerHTML ขององค์ประกอบหรือการตั้งค่าคุณสมบัติ harmlySetInnerHTML บนองค์ประกอบหรือไม่ สมมติว่าฉันทำความสะอาดสิ่งต่าง ๆ ให้ถูกต้องเพื่อความเรียบง่าย ตัวอย่าง: var test = React.createClass({ render: function(){ return ( <div contentEditable='true' dangerouslySetInnerHTML={{ __html: "Hello" }}></div> ); } }); VS var test = React.createClass({ componentDidUpdate: function(prevProp, prevState){ this.refs.test.innerHTML = "Hello"; }, render: function(){ return ( <div contentEditable='true' ref='test'></div> ); } }); …

171 javascript  html  reactjs 

ด้วยรหัสนี้: import React from 'react'; import { Link } from 'react-router'; import { View, NavBar } from 'amazeui-touch'; import * as Pages from '../components'; const { Home, ...Components } = Pages; ฉันได้รับข้อผิดพลาด eslint นี้: 7:16 error Parsing error: Unexpected token .. Why? นี่คือ eslint config ของฉัน: { "extends": "airbnb", "rules": …

169 javascript  reactjs  eslint 

ฉันมีปัญหาในการอัปเดตสถานะช่องทำเครื่องหมายหลังจากได้รับมอบหมายด้วยค่าเริ่มต้นchecked="checked"ใน React var rCheck = React.createElement('input', {type: 'checkbox', checked:'checked', value: true}, 'Check here'); หลังจากกำหนดchecked="checked"ฉันไม่สามารถโต้ตอบสถานะช่องทำเครื่องหมายโดยคลิกเพื่อยกเลิกการเลือก / ตรวจสอบ

169 reactjs  checkbox 

ฉันใหม่เพื่อทำปฏิกิริยา ฉันพยายามที่จะปิดการใช้งานปุ่มเมื่อช่องใส่เป็นที่ว่างเปล่า อะไรคือวิธีที่ดีที่สุดในการตอบโต้เรื่องนี้? ฉันกำลังทำสิ่งต่อไปนี้: <input ref="email"/> <button disabled={!this.refs.email}>Let me in</button> นี่คือถูกต้องหรือไม่ ไม่ใช่แค่การทำซ้ำแอตทริบิวต์แบบไดนามิกเพราะฉันยังสงสัยเกี่ยวกับการถ่ายโอน / ตรวจสอบข้อมูลจากองค์ประกอบหนึ่งไปอีกองค์ประกอบหนึ่ง

168 reactjs 

ฉันมีปัญหาซึ่งฉันไม่มีความคิดวิธีแก้ ในองค์ประกอบการตอบสนองของฉันฉันจะแสดงรายการข้อมูลที่ยาวและมีลิงค์จำนวนน้อยที่ด้านล่าง หลังจากคลิกที่ลิงค์ใด ๆ นี้ฉันกรอกข้อมูลในรายการด้วยลิงค์ใหม่และจำเป็นต้องเลื่อนไปด้านบน ปัญหาคือ - วิธีการเลื่อนไปที่ด้านบนหลังจากที่มีการแสดงคอลเลกชันใหม่? 'use strict'; // url of this component is #/:checklistId/:sectionId var React = require('react'), Router = require('react-router'), sectionStore = require('./../stores/checklist-section-store'); function updateStateFromProps() { var self = this; sectionStore.getChecklistSectionContent({ checklistId: this.getParams().checklistId, sectionId: this.getParams().sectionId }).then(function (section) { self.setState({ section, componentReady: true }); }); this.setState({componentReady: false}); …

168 scroll  reactjs  render 

ฉันกำลังพยายามแสดงองค์ประกอบแบบไดนามิกตามประเภทของพวกเขา ตัวอย่างเช่น: var type = "Example"; var ComponentName = type + "Component"; return <ComponentName />; // Returns <examplecomponent /> instead of <ExampleComponent /> ฉันลองวิธีแก้ปัญหาที่เสนอที่นี่ชื่อส่วนประกอบแบบไดนามิก React / JSX นั่นทำให้ฉันมีข้อผิดพลาดเมื่อรวบรวม (ใช้ browserify สำหรับอึก) มันคาดว่า XML ที่ฉันใช้ไวยากรณ์อาร์เรย์ ฉันสามารถแก้ปัญหานี้โดยการสร้างวิธีการสำหรับทุกองค์ประกอบ: newExampleComponent() { return <ExampleComponent />; } newComponent(type) { return this["new" + type + "Component"](); } …

168 javascript  reactjs  react-jsx 

ฉันใช้ React และ Redux เพื่อพัฒนา webapp และเมื่อฉันเริ่มโครงการฉันได้รับสิ่งนี้: Line 13: Unexpected use of 'location' no-restricted-globals Search for the keywords to learn more about each error. ฉันค้นหาวิธีแก้ปัญหาได้มากมาย แต่ไม่มีคำตอบที่ฉันพบเลยช่วยฉันเลยหันไปหา Stack overflow ไม่มีใครรู้วิธีแก้ไขข้อผิดพลาดนี้หรือไม่? ฉันขอขอบคุณทุกความช่วยเหลือที่ฉันสามารถได้รับ

168 javascript  reactjs  react-router  eslint 

ฉันพยายามเรียนรู้ hooks และuseStateวิธีการทำให้ฉันสับสน ฉันกำลังกำหนดค่าเริ่มต้นให้กับรัฐในรูปแบบของอาร์เรย์ วิธีการในการตั้งค่าuseStateจะไม่ทำงานสำหรับฉันแม้จะมีหรือspread(...) without spread operatorฉันได้ทำ API บนพีซีเครื่องอื่นที่ฉันกำลังเรียกและดึงข้อมูลที่ฉันต้องการตั้งค่าเป็นสถานะ นี่คือรหัสของฉัน: import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom"; const StateSelector = () => { const initialValue = [ { category: "", photo: "", description: "", id: 0, name: "", rating: 0 } ]; const [movies, …

168 javascript  reactjs  react-hooks