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

เมื่อเร็ว ๆ นี้ฉันดูกรอบการตอบสนองของ Facebook ใช้แนวคิดที่เรียกว่า "Virtual DOM" ซึ่งฉันไม่เข้าใจจริงๆ DOM เสมือนคืออะไร ข้อดีคืออะไร

141 javascript  reactjs 

ฉันใช้webpackการจัดการreactjsโครงการ ฉันต้องการที่จะโหลดภาพใน JavaScript โดย file-loaderwebpack ด้านล่างนี้คือwebpack.config.js : const webpack = require('webpack'); const path = require('path'); const NpmInstallPlugin = require('npm-install-webpack-plugin'); const PATHS = { react: path.join(__dirname, 'node_modules/react/dist/react.min.js'), app: path.join(__dirname, 'src'), build: path.join(__dirname, './dist') }; module.exports = { entry: { jsx: './app/index.jsx', }, output: { path: PATHS.build, filename: 'app.bundle.js', }, watch: true, …

141 javascript  reactjs  webpack 

ผลลัพธ์ของข้อผิดพลาดของฉัน: วัตถุการกำหนดค่าไม่ถูกต้อง Webpack เริ่มต้นโดยใช้ออบเจ็กต์การกำหนดค่าที่ไม่ตรงกับสคีมา API - configuration.module มีคุณสมบัติที่ไม่รู้จัก 'loaders' คุณสมบัติเหล่านี้ถูกต้อง: object {exprContextCritical ?, exprContextRecursive ?, exprContextRegExp ?, exprContextRequest ?, noParse ?, rules ?, defaultRules ?, UnknownContextCritical ?, UnknownContextRecursive?, UnknownContextRegExp ?, unknownContextRequest? ?, tightExportPresence?, tightThisContextOnImports? } -> ตัวเลือกที่มีผลต่อโมดูลปกติ ( NormalModuleFactory) webpack.config.js ของฉัน: var webpack = require('webpack'); var path = require('path'); var …

140 reactjs  webpack 

ฉันใช้รหัสด้านล่างเพื่อตั้งค่าอุปกรณ์ประกอบฉากเริ่มต้นในส่วนประกอบ React แต่ไม่ได้ผล ในrender()วิธีนี้ฉันสามารถเห็นผลลัพธ์ "อุปกรณ์ประกอบฉากที่ไม่ได้กำหนด" พิมพ์อยู่บนคอนโซลของเบราว์เซอร์ ฉันจะกำหนดค่าเริ่มต้นสำหรับอุปกรณ์ประกอบฉากได้อย่างไร export default class AddAddressComponent extends Component { render() { let {provinceList,cityList} = this.props if(cityList === undefined || provinceList === undefined){ console.log('undefined props') } ... } AddAddressComponent.contextTypes = { router: React.PropTypes.object.isRequired } AddAddressComponent.defaultProps = { cityList: [], provinceList: [], } AddAddressComponent.propTypes = { userInfo: …

140 reactjs  ecmascript-6 

ฉันใช้ typescript กับ React ฉันมีปัญหาในการทำความเข้าใจวิธีใช้การอ้างอิงเพื่อรับการพิมพ์แบบคงที่และ Intellisense เกี่ยวกับโหนดปฏิกิริยาที่อ้างอิงโดยผู้อ้างอิง รหัสของฉันมีดังนี้ import * as React from 'react'; interface AppState { count: number; } interface AppProps { steps: number; } interface AppRefs { stepInput: HTMLInputElement; } export default class TestApp extends React.Component<AppProps, AppState> { constructor(props: AppProps) { super(props); this.state = { count: 0 }; …

140 reactjs  typescript 

ฉันเห็นสิ่งนี้ ไม่ใช่เรื่องลึกลับที่บ่นเกี่ยวกับ: Warning: validateDOMnesting(...): <div> cannot appear as a descendant of <p>. See ... SomeComponent > p > ... > SomeOtherComponent > ReactTooltip > div. ฉันเป็นผู้เขียนSomeComponentและSomeOtherComponent. แต่หลังใช้การพึ่งพาภายนอก ( ReactTooltipจากreact-tooltip) อาจไม่จำเป็นว่านี่คือการพึ่งพาภายนอก แต่ให้ฉันลองใช้อาร์กิวเมนต์ที่นี่ว่าเป็น "รหัสบางอย่างที่ไม่สามารถควบคุมได้" ฉันควรกังวลแค่ไหนเกี่ยวกับคำเตือนนี้เนื่องจากส่วนประกอบที่ซ้อนกันทำงานได้ดี (ดูเหมือน) และฉันจะเปลี่ยนสิ่งนี้อย่างไรต่อไป (หากฉันไม่ต้องการใช้การอ้างอิงภายนอกอีกครั้ง) อาจจะมีการออกแบบที่ดีกว่าที่ฉันยังไม่รู้อีกหรือไม่? SomeOtherComponentเพื่อประโยชน์ครบถ้วนนี่คือการดำเนินงานของ เพียงแค่แสดงผลthis.props.valueและเมื่อวางเมาส์: คำแนะนำเครื่องมือที่ระบุว่า "ข้อความคำแนะนำเครื่องมือบางอย่าง": class SomeOtherComponent extends React.Component { constructor(props) { super(props) } …

140 reactjs 

ผมเล่นไปรอบ ๆ ด้วยReactและES6ใช้และbabel webpackฉันต้องการสร้างคอมโพเนนต์หลาย ๆ ไฟล์ในไฟล์ที่แตกต่างกันนำเข้าในไฟล์เดียวและรวมเข้ากับไฟล์webpack สมมติว่าฉันมีส่วนประกอบบางอย่างดังนี้: my-navbar.jsx import React from 'react'; import Navbar from 'react-bootstrap/lib/Navbar'; export class MyNavbar extends React.Component { render(){ return ( <Navbar className="navbar-dark" fluid> ... </Navbar> ); } } main-page.jsx import React from 'react'; import ReactDOM from 'react-dom'; import MyNavbar from './comp/my-navbar.jsx'; export class MyPage extends …

139 reactjs  ecmascript-6  webpack 

การใช้componentDidMount()เป็นฟังก์ชัน async แนวปฏิบัติที่ดีใน React Native หรือฉันควรหลีกเลี่ยง ฉันต้องการข้อมูลบางอย่างจากAsyncStorageเวลาที่ส่วนประกอบติดตั้ง แต่วิธีเดียวที่ฉันรู้ว่าจะทำให้เป็นไปได้คือทำให้componentDidMount()ฟังก์ชันไม่ตรงกัน async componentDidMount() { let auth = await this.getAuth(); if (auth) this.checkAuth(auth); } มีปัญหาหรือไม่และมีวิธีแก้ไขปัญหาอื่น ๆ หรือไม่?

139 reactjs  asynchronous  react-native 

ฉันจะรับ URL แบบเต็มจากภายในคอมโพเนนต์ ReactJS ได้อย่างไร ฉันคิดว่ามันควรจะเป็นสิ่งที่เหมือนthis.props.locationแต่มันเป็นundefined

139 reactjs 

ฉันมีองค์ประกอบการแจ้งเตือนและฉันมีการตั้งค่าการหมดเวลาสำหรับมัน this.setState({isTimeout:true})หลังจากหมดเวลาผมโทร สิ่งที่ฉันต้องการทำคือถ้าหมดเวลาแล้วฉันไม่ต้องการแสดงผลอะไรเลย: render() { let finalClasses = "" + (this.state.classes || ""); if (isTimeout){ return (); // here has some syntax error } return (<div>{this.props.children}</div>); } ปัญหาคือ: return (); // ที่นี่มีข้อผิดพลาดทางไวยากรณ์

138 reactjs 

ฉันจะรับข้อมูลจากReadableStreamวัตถุได้อย่างไร? ฉันใช้ Fetch API และไม่เห็นว่าสิ่งนี้ชัดเจนจากเอกสารประกอบ กำลังส่งคืนร่างเป็นReadableStreamและฉันก็แค่ต้องการเข้าถึงคุณสมบัติภายในสตรีมนี้ ภายใต้การตอบสนองในเครื่องมือ dev ของเบราว์เซอร์ฉันดูเหมือนว่าจะมีข้อมูลนี้จัดเป็นคุณสมบัติในรูปแบบของวัตถุ JavaScript fetch('http://192.168.5.6:2000/api/car', obj) .then((res) => { if(res.status == 200) { console.log("Success :" + res.statusText); //works just fine } else if(res.status == 400) { console.log(JSON.stringify(res.body.json()); //res.body is undefined. } return res.json(); })

138 javascript  node.js  reactjs  fetch 

ฉันเพิ่งย้ายจาก Angular ไปที่ ReactJs ฉันใช้ jQuery สำหรับการเรียก API ฉันมี API ที่ส่งคืนรายชื่อผู้ใช้แบบสุ่มที่จะพิมพ์ในรายการ ฉันไม่แน่ใจว่าจะเขียนการเรียก API ของฉันอย่างไร แนวทางปฏิบัติที่ดีที่สุดสำหรับสิ่งนี้คืออะไร? ฉันลองทำตามขั้นตอนต่อไปนี้ แต่ไม่ได้รับผลลัพธ์ใด ๆ ฉันเปิดให้ใช้ไลบรารี API ทางเลือกหากจำเป็น ด้านล่างนี้คือรหัสของฉัน: import React from 'react'; export default class UserList extends React.Component { constructor(props) { super(props); this.state = { person: [] }; } UserList(){ return $.getJSON('https://randomuser.me/api/') .then(function(data) { return data.results; …

137 javascript  jquery  reactjs 

เหตุใดในตัวอย่างโค้ดหลอกต่อไปนี้ Child จึงไม่แสดงผลอีกครั้งเมื่อคอนเทนเนอร์เปลี่ยน foo.bar Container { handleEvent() { this.props.foo.bar = 123 }, render() { return <Child bar={this.props.foo.bar} /> } Child { render() { return <div>{this.props.bar}</div> } } แม้ว่าฉันจะเรียกforceUpdate()หลังจากแก้ไขค่าในคอนเทนเนอร์แล้ว Child ก็ยังคงแสดงค่าเดิม

137 javascript  html  reactjs 

TLDR: ใช้ defaultChecked แทนที่จะทำเครื่องหมายไว้ว่าทำงานได้jsbin พยายามติดตั้งช่องทำเครื่องหมายอย่างง่ายที่จะขีดฆ่าข้อความฉลากเมื่อมีการทำเครื่องหมาย ด้วยเหตุผลบางอย่าง handleChange ไม่เริ่มทำงานเมื่อฉันใช้ส่วนประกอบ ทุกคนสามารถอธิบายสิ่งที่ฉันทำผิดได้ไหม var CrossoutCheckbox = React.createClass({ getInitialState: function () { return { complete: (!!this.props.complete) || false }; }, handleChange: function(){ console.log('handleChange', this.refs.complete.checked); // Never gets logged this.setState({ complete: this.refs.complete.checked }); }, render: function(){ var labelStyle={ 'text-decoration': this.state.complete?'line-through':'' }; return ( <span> <label style={labelStyle}> …

136 checkbox  onchange  reactjs 

ฉันโคลนแอปพลิเคชันตอบสนองลงในระบบของฉันและรันคำสั่งต่อไปนี้ npm install -g create-react-app npm install --save react react-dom หลังจากนั้นฉันก็วิ่ง npm start แต่มันทำให้เกิดข้อผิดพลาดดังกล่าวข้างต้นมันทำงานได้ดีในระบบอื่นของฉันซึ่งฉันผลักมันไปที่ github แต่จะไม่ทำงานบนระบบอื่นหลังจากโคลนไม่ว่าจะเป็น windows หรือ mac

136 reactjs