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

ฉันกำลังสร้างบางสิ่งด้วย React ที่ฉันต้องการแทรก HTML ด้วยตัวแปร React ใน JSX มีวิธีที่จะมีตัวแปรดังนี้: var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>'; และใส่เข้าไปในปฏิกิริยาเช่นนั้นและทำงานได้หรือไม่ render: function() { return ( <div className="content">{thisIsMyCopy}</div> ); } และมันแทรก HTML ตามที่คาดไว้หรือไม่ ฉันไม่ได้เห็นหรือได้ยินอะไรเกี่ยวกับฟังก์ชั่นตอบสนองที่สามารถทำแบบอินไลน์นี้หรือวิธีการแยกวิเคราะห์สิ่งที่จะช่วยให้การทำงาน

203 javascript  html  frontend  reactjs  react-jsx 

ฉันใหม่สำหรับ ReactJS ขออภัยหากปิดใช้งาน ฉันมีส่วนประกอบที่สร้างแถวของตารางหลายแถวตามข้อมูลที่ได้รับ แต่ละเซลล์ภายในคอลัมน์จะมีช่องทำเครื่องหมายวิทยุ ดังนั้นผู้ใช้สามารถเลือกหนึ่งsite_nameและหนึ่งaddressจากแถวที่มีอยู่ การเลือกจะแสดงในส่วนท้าย และนั่นคือสิ่งที่ฉันติดอยู่ var SearchResult = React.createClass({ render: function(){ var resultRows = this.props.data.map(function(result){ return ( <tbody> <tr> <td><input type="radio" name="site_name" value={result.SITE_NAME}>{result.SITE_NAME}</input></td> <td><input type="radio" name="address" value={result.ADDRESS}>{result.ADDRESS}</input></td> </tr> </tbody> ); }); return ( <table className="table"> <thead> <tr> <th>Name</th> <th>Address</th> </tr> </thead> {resultRows} <tfoot> <tr> <td>chosen site name …

203 html  reactjs 

เมื่อฉันเรียกใช้โปรเจคต์ตอบโต้พื้นเมืองฉันได้รับข้อผิดพลาดno bundle URL presentแต่ฉันไม่รู้ว่าทำอะไรผิดพลาดฉันสับสนมาก

200 ios  reactjs  react-native 

ฉันมีรูปแบบที่เรียบง่ายในrenderฟังก์ชั่นของฉันเช่น: render : function() { return ( <form> <input type="text" name="email" placeholder="Email" /> <input type="password" name="password" placeholder="Password" /> <button type="button" onClick={this.handleLogin}>Login</button> </form> ); }, handleLogin: function() { //How to access email and password here ? } ฉันควรเขียนสิ่งใดในhandleLogin: function() { ... }การเข้าถึงEmailและPasswordฟิลด์

199 javascript  html  reactjs  frontend 

ในองค์ประกอบแอป React ที่จัดการฟีดเนื้อหาคล้าย Facebook ฉันพบข้อผิดพลาด: Feed.js: 94 undefined "parsererror" "SyntaxError: โทเค็นที่ไม่คาดคิด <ใน JSON ที่ตำแหน่ง 0 ฉันพบข้อผิดพลาดที่คล้ายกันซึ่งกลายเป็นคำผิดใน HTML ภายในฟังก์ชันการแสดงผล แต่ดูเหมือนจะไม่เป็นเช่นนั้น ยิ่งไปกว่านั้นฉันรีดรหัสกลับไปเป็นเวอร์ชันก่อนหน้าซึ่งเป็นที่รู้จักและยังคงได้รับข้อผิดพลาด Feed.js: import React from 'react'; var ThreadForm = React.createClass({ getInitialState: function () { return {author: '', text: '', included: '', victim: '' } }, handleAuthorChange: function (e) { this.setState({author: e.target.value}) …

199 javascript  jquery  json  reactjs 

ฉันค่อนข้างใหม่ที่จะตอบสนอง ฉันเห็นว่าเราต้องนำเข้าสองสิ่งเพื่อเริ่มต้นReactและReactDOMทุกคนสามารถอธิบายความแตกต่างได้ ฉันอ่านเอกสาร Reactแต่มันไม่ได้พูดอะไร

198 reactjs  react-dom 

เป็นไปได้ไหมที่จะส่งการกระทำในตัวลดเอง? ฉันมีแถบความคืบหน้าและองค์ประกอบเสียง เป้าหมายคือการอัพเดทแถบความคืบหน้าเมื่อเวลาได้รับการปรับปรุงในองค์ประกอบเสียง แต่ฉันไม่รู้ว่าจะวางตำแหน่งตัวจัดการเหตุการณ์ ontime หรือวิธีส่งการดำเนินการในการเรียกกลับของ ontimeupdate เพื่ออัพเดทแถบความคืบหน้า นี่คือรหัสของฉัน: //reducer const initialState = { audioElement: new AudioElement('test.mp3'), progress: 0.0 } initialState.audioElement.audio.ontimeupdate = () => { console.log('progress', initialState.audioElement.currentTime/initialState.audioElement.duration); //how to dispatch 'SET_PROGRESS_VALUE' now? }; const audio = (state=initialState, action) => { switch(action.type){ case 'SET_PROGRESS_VALUE': return Object.assign({}, state, {progress: action.progress}); default: return …

197 reactjs  redux  reducers 

วิธีที่ต้องการใช้ในการตรวจสอบDateเสาในการตอบสนองคืออะไร? ตอนนี้ฉันกำลังใช้: React.PropTypes.object อย่างไรก็ตามตอนนี้สิ่งนี้กำลังล้มเหลวกฎผ้าสำลี forbid -prop-types ฉันควรใช้shapeหรือมีวิธีที่ดีกว่านี้หรือไม่?

196 reactjs 

ฉันกำลังสร้างแอปพลิเคชัน react.js ด้วยสถาปัตยกรรมของฟลักซ์และฉันพยายามหาว่าควรจะทำคำขอข้อมูลจากเซิร์ฟเวอร์ที่ไหนและเมื่อใด มีตัวอย่างใด ๆ สำหรับสิ่งนี้หรือไม่ (ไม่ใช่แอพพลิเคชั่นที่ต้องทำ!)

194 javascript  reactjs  reactjs-flux 

@connectใช้งานได้ดีเมื่อฉันพยายามเข้าถึงร้านค้าภายในส่วนประกอบการตอบสนอง แต่ฉันจะเข้าถึงมันอย่างไรในรหัสบิตอื่น ตัวอย่างเช่นสมมติว่าฉันต้องการใช้โทเค็นการอนุญาตสำหรับการสร้างอินสแตนซ์ axios ที่สามารถใช้ได้ทั่วโลกในแอพของฉันสิ่งที่จะเป็นวิธีที่ดีที่สุดในการบรรลุเป้าหมายนั้น นี่เป็นของฉัน api.js // tooling modules import axios from 'axios' // configuration const api = axios.create() api.defaults.baseURL = 'http://localhost:5001/api/v1' api.defaults.headers.common['Authorization'] = 'AUTH_TOKEN' // need the token here api.defaults.headers.post['Content-Type'] = 'application/json' export default api ตอนนี้ฉันต้องการเข้าถึงจุดข้อมูลจากร้านค้าของฉันนี่คือสิ่งที่จะดูเหมือนถ้าฉันพยายามดึงข้อมูลภายในส่วนประกอบที่ตอบสนองโดยใช้ @connect // connect to store @connect((store) => { return { auth: store.auth …

192 reactjs  redux  react-redux 

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

191 reactjs  callback  setstate 

ฉันใช้วัตถุข้อมูลเป็นอุปกรณ์ประกอบฉากของฉันสำหรับส่วนประกอบใน ReactJS <Field data={data} /> ฉันรู้ว่ามันง่ายในการตรวจสอบวัตถุ PropTypes เอง: propTypes: { data: React.PropTypes.object } แต่ถ้าฉันต้องการตรวจสอบค่าภายใน กล่าวคือ data.id, data.title? props[propName]: React.PropTypes.number.required // etc...

191 reactjs 

ฉันจะใช้ความคิดเห็นภายในrenderวิธีการในองค์ประกอบทำปฏิกิริยา ฉันมีองค์ประกอบดังต่อไปนี้: 'use strict'; var React = require('react'), Button = require('./button'), UnorderedList = require('./unordered-list'); class Dropdown extends React.Component{ constructor(props) { super(props); } handleClick() { alert('I am click here'); } render() { return ( <div className="dropdown"> // whenClicked is a property not an event, per se. <Button whenClicked={this.handleClick} className="btn-default" title={this.props.title} subTitleClassName="caret"></Button> …

191 reactjs  react-native 

ฉันพยายามทดสอบแอปพลิเคชัน React ของฉันบนอุปกรณ์มือถือ ฉันใช้ ngrok เพื่อทำให้เซิร์ฟเวอร์ในพื้นที่ของฉันพร้อมใช้งานกับอุปกรณ์อื่นและได้รับการทำงานกับแอพพลิเคชั่นอื่น ๆ ที่หลากหลาย อย่างไรก็ตามเมื่อฉันพยายามเชื่อมต่อ ngrok กับเซิร์ฟเวอร์ React dev ฉันได้รับข้อผิดพลาด: Invalid Host Header ฉันเชื่อว่า React บล็อกคำขอทั้งหมดจากแหล่งอื่นตามค่าเริ่มต้น ความคิดใด ๆ

191 reactjs  localhost  ngrok 

มารู้ว่าจากReact v15.3.0เรามีคลาสฐานใหม่ที่เรียกว่าPureComponentเพื่อขยายด้วยPureRenderMixinในตัว shouldComponentUpdateสิ่งที่ผมเข้าใจคือว่าภายใต้ฝากระโปรงนี้มีพนักงานเปรียบเทียบตื้นของประกอบฉากภายใน ตอนนี้เรามี 3 วิธีในการกำหนดส่วนประกอบ React: องค์ประกอบไร้สัญชาติที่ใช้งานได้ซึ่งไม่ขยายชั้นเรียนใด ๆ ส่วนประกอบที่ขยายPureComponentชั้นเรียน องค์ประกอบปกติที่ขยายComponentชั้นเรียน เมื่อก่อนเราเคยเรียกองค์ประกอบไร้สัญชาติว่าเป็น Pure Components หรือแม้กระทั่ง Dumb Components ดูเหมือนว่าความหมายทั้งหมดของคำว่า "บริสุทธิ์" ได้เปลี่ยนไปแล้วใน React ถึงแม้ว่าผมจะเข้าใจความแตกต่างขั้นพื้นฐานระหว่างสามเหล่านี้ผมยังไม่แน่ใจว่าเมื่อมีการเลือกสิ่งที่ นอกจากนี้สิ่งที่ส่งผลกระทบต่อประสิทธิภาพและการค้าของแต่ละ? อัปเดต : นี่คือคำถามที่ฉันคาดว่าจะได้รับการชี้แจง: ฉันควรเลือกที่จะกำหนดองค์ประกอบที่เรียบง่ายของฉันเป็นฟังก์ชั่น (เพื่อประโยชน์ของความเรียบง่าย) หรือขยายPureComponentชั้นเรียน (เพื่อประโยชน์ในการปฏิบัติงาน)? การเพิ่มประสิทธิภาพนั้นทำให้ฉันได้แลกเปลี่ยนกับความเรียบง่ายที่ฉันเสียไปจริงหรือเปล่า? ฉันจะต้องขยายComponentชั้นเรียนปกติหรือไม่เมื่อฉันสามารถใช้PureComponentเพื่อประสิทธิภาพที่ดีขึ้นได้หรือไม่?

189 javascript  reactjs  ecmascript-6