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

React สามารถแสดงแอตทริบิวต์ที่กำหนดเองได้ตามที่อธิบายไว้ที่ http://facebook.github.io/react/docs/jsx-gotchas.html : หากคุณต้องการใช้แอตทริบิวต์ที่กำหนดเองคุณควรใส่คำเสริมหน้าด้วย data- <div data-custom-attribute="foo" /> และนั่นเป็นข่าวที่ดียกเว้นฉันไม่สามารถหาวิธีเข้าถึงได้จากวัตถุเหตุการณ์เช่น: render: function() { ... <a data-tag={i} style={showStyle} onClick={this.removeTag}></a> ... removeTag: function(event) { this.setState({inputVal: event.target????}); }, องค์ประกอบและdata-คุณสมบัติการแสดงผลในรูปแบบ html ปรับ คุณสมบัติมาตรฐานเช่นstyleสามารถเข้าถึงได้event.target.styleดี แทนที่จะevent.targetลอง: event.target.props.data.tag event.target.props.data["tag"] event.target.props["data-tag"] event.target.data.tag event.target.data["tag"] event.target["data-tag"] ไม่สามารถใช้งานได้

214 javascript  facebook  reactjs 

ในการตอบสนองคุณสามารถสร้างวัตถุอย่างชัดเจนและกำหนดให้เป็นสไตล์แบบอินไลน์ กล่าวคือ ระบุไว้ด้านล่าง var divStyle = { color: 'white', backgroundImage: 'url(' + imgUrl + ')', WebkitTransition: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is the only lowercase vendor prefix }; var divStyle2 = {fontSize: '18px'}; React.render(<div style={divStyle}>Hello World!</div>, mountNode); ฉันจะรวมหลายวัตถุและกำหนดให้เข้าด้วยกันได้อย่างไร

214 reactjs 

ฉันมีปัญหาในการจัดการกับ ReactJS ของ Facebook เมื่อใดก็ตามที่ฉันทำ Ajax และต้องการแสดงข้อมูล html ReactJS จะแสดงเป็นข้อความ (ดูรูปด้านล่าง) ข้อมูลจะแสดงผ่านฟังก์ชันการเรียกกลับที่สำเร็จของ jquery Ajax $.ajax({ url: url here, dataType: "json", success: function(data) { this.setState({ action: data.action }) }.bind(this) }); มีวิธีง่าย ๆ ในการแปลงเป็น html หรือไม่ ฉันควรทำอย่างไรโดยใช้ ReactJS

212 javascript  jquery  ajax  reactjs 

ฉันส่งค่า 2 ค่าไปยังคอมโพเนนต์ชายน์: รายการของวัตถุที่จะแสดง ฟังก์ชั่นลบ ฉันใช้ฟังก์ชั่น. map () เพื่อแสดงรายการวัตถุของฉัน (เช่นในตัวอย่างที่ให้ไว้ในหน้าการตอบสนองต่อการกวดวิชา) แต่ปุ่มในองค์ประกอบนั้นจะทำการonClickทำงานของฟังก์ชั่นในการแสดงผล รหัสของฉันมีลักษณะเช่นนี้: module.exports = React.createClass({ render: function(){ var taskNodes = this.props.todoTasks.map(function(todo){ return ( <div> {todo.task} <button type="submit" onClick={this.props.removeTaskFunction(todo)}>Submit</button> </div> ); }, this); return ( <div className="todo-task-list"> {taskNodes} </div> ); } }); คำถามของฉันคือ: เหตุใดonClickฟังก์ชั่นนี้จึงใช้ไฟในการเรนเดอร์และทำไม่ได้?

212 javascript  reactjs  button  onclick  dom-events 

หลังจากใช้เวลาในการเรียนรู้ทำปฏิกิริยาฉันเข้าใจความแตกต่างระหว่างกระบวนทัศน์หลักสองประการของการสร้างส่วนประกอบ คำถามของฉันคือเมื่อฉันควรใช้ที่หนึ่งและทำไม สิทธิประโยชน์ / การแลกเปลี่ยนของหนึ่งเหนือสิ่งอื่นคืออะไร? คลาส ES6: import React, { Component } from 'react'; export class MyComponent extends Component { render() { return ( <div></div> ); } } การทำงาน: const MyComponent = (props) => { return ( <div></div> ); } ฉันคิดว่าการทำงานเมื่อใดก็ตามที่ไม่มีสถานะที่จะจัดการโดยองค์ประกอบนั้น แต่มันคืออะไร? ฉันเดาว่าถ้าฉันใช้วิธีวงจรชีวิตใด ๆ มันอาจจะดีที่สุดที่จะไปกับองค์ประกอบตามระดับ

212 javascript  reactjs  ecmascript-6  redux 

วิธีการจัดกึ่งกลางข้อความใน ReactNative ทั้งในแนวนอนและแนวตั้ง ฉันมีตัวอย่างแอปพลิเคชันใน rnplay.org โดยที่justifyContent = "center"และalignItems = "center"ไม่ทำงาน: https://rnplay.org/apps/AoxNKQ ข้อความควรอยู่กึ่งกลาง และทำไมถึงมีระยะห่างระหว่างข้อความ (สีเหลือง) และคอนเทนเนอร์หลัก? รหัส: 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, Image, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View style={styles.container}> <View style={styles.topBox}> <Text style={styles.headline}>lorem ipsum{'\n'}ipsum lorem lorem</Text> …

212 reactjs  flexbox  react-native 

โครงการของฉันอยู่บนพื้นฐานของการสร้างปฏิกิริยาแอป npm startหรือyarn startโดยค่าเริ่มต้นจะเรียกใช้แอปพลิเคชันบนพอร์ต 3000และไม่มีตัวเลือกในการระบุพอร์ตใน package.json ฉันจะระบุพอร์ตที่เลือกได้ในกรณีนี้ได้อย่างไร ฉันต้องการเรียกใช้สองโครงการนี้พร้อมกัน (สำหรับการทดสอบ) หนึ่งรายการในพอร์ต3005และอื่น ๆ คือ3006

212 reactjs  npm 

Reactมีบางอย่างที่ผมพบว่าทำให้เกิดความสับสนมากเมื่อทำงานในคือ มีตัวอย่างมากมายบนอินเทอร์เน็ตที่ใช้.jsไฟล์ที่มีการตอบสนอง แต่มีอีกหลายคนที่ใช้.jsxไฟล์ ฉันได้อ่านเกี่ยวกับ.jsxไฟล์และความเข้าใจของผมคือว่าพวกเขาเพียงแค่ให้คุณเขียน HTML javascriptแท็กภายในของคุณ แต่สิ่งเดียวกันสามารถเขียนใน.jsไฟล์ได้เช่นกัน ดังนั้นสิ่งที่เป็นความแตกต่างที่เกิดขึ้นจริงระหว่างทั้งสองส่วนขยาย.jsและ.jsx?

211 reactjs  jsx 

ฉันกำลังพยายามส่งข้อมูลจากองค์ประกอบลูกไปยังผู้ปกครองดังต่อไปนี้: const ParentComponent = React.createClass({ getInitialState() { return { language: '', }; }, handleLanguageCode: function(langValue) { this.setState({language: langValue}); }, render() { return ( <div className="col-sm-9" > <SelectLanguage onSelectLanguage={this.handleLanguage}/> </div> ); }); และนี่คือองค์ประกอบย่อย: export const SelectLanguage = React.createClass({ getInitialState: function(){ return{ selectedCode: '', selectedLanguage: '', }; }, handleLangChange: function (e) { …

211 reactjs 

useEffect React เบ็ดจะทำงานที่ผ่านมาในการทำงานในทุกการเปลี่ยนแปลง สิ่งนี้สามารถปรับให้เหมาะสมเพื่อให้มันโทรเฉพาะเมื่อคุณสมบัติที่ต้องการเปลี่ยนไป จะเกิดอะไรขึ้นถ้าฉันต้องการเรียกใช้ฟังก์ชันการเริ่มต้นcomponentDidMountและไม่เรียกมันอีกครั้งจากการเปลี่ยนแปลง สมมติว่าฉันต้องการโหลดเอนทิตี แต่ฟังก์ชั่นการโหลดไม่ต้องการข้อมูลใด ๆ จากส่วนประกอบ เราจะทำสิ่งนี้โดยใช้useEffectเบ็ดได้อย่างไร class MyComponent extends React.PureComponent { componentDidMount() { loadDataOnlyOnce(); } render() { ... } } ด้วย hooks นี้อาจมีลักษณะเช่นนี้: function MyComponent() { useEffect(() => { loadDataOnlyOnce(); // this will fire on every change :( }, [...???]); return (...); }

210 javascript  reactjs  react-hooks 

ฉันกำลังทำงานกับReact JSและReact Native framework ในช่วงครึ่งทางฉันพบว่า Immutability หรือห้องสมุด Immutable -JSเมื่อฉันอ่านเกี่ยวกับการใช้ Flux และ Redux ของ Facebook คำถามคือทำไมการไม่เปลี่ยนรูปจึงสำคัญมาก? เกิดอะไรขึ้นในการกลายพันธุ์วัตถุ? มันไม่ได้ทำให้สิ่งต่าง ๆ ง่ายขึ้น? ยกตัวอย่างให้เราพิจารณาแอพอ่านข่าวแบบง่ายโดยมีหน้าจอเปิดเป็นมุมมองรายการของหัวข้อข่าว หากฉันตั้งค่าให้บอกว่าอาร์เรย์ของวัตถุที่มีค่าเริ่มต้นฉันไม่สามารถจัดการมันได้ นั่นคือสิ่งที่หลักการเปลี่ยนแปลงไม่ได้พูดว่าใช่มั้ย (แก้ไขให้ถูกต้องหากฉันทำผิด) แต่จะเกิดอะไรขึ้นถ้าฉันมีวัตถุข่าวใหม่ที่ต้องได้รับการปรับปรุง ในกรณีปกติฉันสามารถเพิ่มวัตถุลงในอาร์เรย์ได้ ฉันจะประสบความสำเร็จในกรณีนี้ได้อย่างไร ลบร้านค้าและสร้างใหม่หรือไม่ การเพิ่มวัตถุลงในอาร์เรย์เป็นการดำเนินการที่ไม่แพงหรือไม่

206 javascript  reactjs  functional-programming  immutability  immutable.js 

ฉันจะเลือกแท่งบางอย่างใน react.js ได้อย่างไร นี่คือรหัสของฉัน: var Progressbar = React.createClass({ getInitialState: function () { return { completed: this.props.completed }; }, addPrecent: function (value) { this.props.completed += value; this.setState({ completed: this.props.completed }); }, render: function () { var completed = this.props.completed; if (completed < 0) { completed = 0 }; return (...); } …

205 javascript  reactjs  getelementbyid 

ใน React มีความแตกต่างที่แท้จริงระหว่างการใช้งานทั้งสองนี้หรือไม่ เพื่อนบางคนบอกฉันว่า FirstComponent เป็นรูปแบบ แต่ฉันไม่เห็นว่าทำไม SecondComponent ดูง่ายขึ้นเพราะการเรนเดอร์ถูกเรียกเพียงครั้งเดียว ครั้งแรก: import React, { PropTypes } from 'react' class FirstComponent extends React.Component { state = { description: '' } componentDidMount() { const { description} = this.props; this.setState({ description }); } render () { const {state: { description }} = this; return …

204 javascript  reactjs  components 

ฉันใหม่สำหรับ Bootstrap และติดอยู่กับปัญหานี้ ฉันมีช่องป้อนข้อมูลและทันทีที่ฉันป้อนเพียงหนึ่งหลักฟังก์ชันจากonChangeนั้นจะถูกเรียกใช้ แต่ฉันต้องการให้มันถูกเรียกเมื่อฉันกด 'Enter เมื่อป้อนหมายเลขทั้งหมดแล้ว ปัญหาเดียวกันสำหรับฟังก์ชั่นการตรวจสอบ - มันเรียกเร็วเกินไป var inputProcent = React.CreateElement(bootstrap.Input, {type: "text", //bsStyle: this.validationInputFactor(), placeholder: this.initialFactor, className: "input-block-level", onChange: this.handleInput, block: true, addonBefore: '%', ref:'input', hasFeedback: true });

204 javascript  twitter-bootstrap  reactjs 

POSTคำขอaxios กดปุ่ม url บนคอนโทรลเลอร์ แต่การตั้งค่า null เป็นคลาส POJO ของฉันเมื่อฉันไปถึงเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใน chrome โครเมี่ยม payload มีข้อมูล ผมทำอะไรผิดหรือเปล่า? คำขอ Axios POST: var body = { userName: 'Fred', userEmail: 'Flintstone@gmail.com' } axios({ method: 'post', url: '/addUser', data: body }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); การตอบสนองของเบราว์เซอร์: หากฉันตั้งค่าส่วนหัวเป็น: headers:{ Content-Type:'multipart/form-data' } คำขอส่งข้อผิดพลาด …

204 reactjs  react-redux  axios  ajaxform  axios-cookiejar-support