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

ฉันกำลังทำงานกับโปรเจ็กต์ที่มี typescript, React และ Redux (ทั้งหมดทำงานใน Electron) และฉันพบปัญหาเมื่อฉันรวมองค์ประกอบตามคลาสหนึ่งในอีกอันและพยายามส่งผ่านพารามิเตอร์ระหว่างพวกเขา พูดอย่างหลวม ๆ ฉันมีโครงสร้างต่อไปนี้สำหรับส่วนประกอบคอนเทนเนอร์: class ContainerComponent extends React.Component<any,any> { .. render() { const { propToPass } = this.props; ... <ChildComponent propToPass={propToPass} /> ... } } .... export default connect(mapStateToProps, mapDispatchToProps)(ContainerComponent); และองค์ประกอบลูก: interface IChildComponentProps extends React.Props<any> { propToPass: any } class ChildComponent extends React.Component<IChildComponentProps, …

96 reactjs  typescript  redux  electron  jsx 

ฉันเข้าใจวิธี (และทำไม ) ในการเพิ่มช่องว่างใน JSX แต่ฉันสงสัยว่าแนวทางปฏิบัติที่ดีที่สุดคืออะไรหรือมีข้อแตกต่างที่แท้จริงอย่างไร รวมทั้งสององค์ประกอบในช่วง <div className="top-element-formatting"> <span>Hello </span> <span className="second-word-formatting">World!</span> </div> เพิ่มในบรรทัดเดียว <div className="top-element-formatting"> Hello <span className="second-word-formatting">World!</span> </div> Add space with JS <div className="top-element-formatting"> Hello {" "} <span className="second-word-formatting">World!</span> </div>

96 javascript  reactjs  react-jsx 

ในขณะที่ฉันกำลังอ่าน HTML ของบางหน้าฉันสังเกตเห็นว่าบางหน้าใช้แอตทริบิวต์ "data-reactid" เช่น: <a data-reactid="......" ></a> แอตทริบิวต์นั้นคืออะไรและมีหน้าที่อะไร?

96 javascript  html  reactjs 

ฉันยังใหม่กับ webpack มากฉันพบว่าในรุ่นการผลิตเราสามารถลดขนาดของโค้ดโดยรวมได้ ปัจจุบัน webpack สร้างไฟล์ประมาณ 8MB และ main.js ประมาณ 5MB จะลดขนาดโค้ดในการผลิตได้อย่างไร? ฉันพบไฟล์การกำหนดค่า webpack ตัวอย่างจากอินเทอร์เน็ตและฉันกำหนดค่าสำหรับแอปพลิเคชันของฉันและฉันเรียกใช้npm run buildและเริ่มสร้างและสร้างไฟล์บางไฟล์ใน./dist/ไดเรกทอรี ไฟล์เหล่านี้ยังคงมีน้ำหนักมาก (เหมือนกับเวอร์ชันระหว่างการพัฒนา) จะใช้ไฟล์เหล่านี้อย่างไร? ขณะนี้ฉันใช้ webpack-dev-server เพื่อเรียกใช้แอปพลิเคชัน package.json ไฟล์ { "name": "MyAPP", "version": "0.1.0", "description": "", "main": "src/server/server.js", "repository": { "type": "git", "url": "" }, "keywords": [ ], "author": "Iam", "license": "MIT", "homepage": "http://example.com", …

95 node.js  reactjs  npm  webpack  webpack-dev-server 

ฉันคาดหวังว่าสถานะจะโหลดซ้ำเมื่อเปลี่ยนอุปกรณ์ประกอบฉาก แต่ไม่ได้ผลและuserตัวแปรไม่ได้รับการอัปเดตในการuseStateโทรครั้งต่อไปมีอะไรผิดปกติ function Avatar(props) { const [user, setUser] = React.useState({...props.user}); return user.avatar ? (<img src={user.avatar}/>) : (<p>Loading...</p>); } codepen

95 reactjs  react-hooks 

ตามเอกสาร: componentDidUpdate()จะถูกเรียกใช้ทันทีหลังจากการอัปเดตเกิดขึ้น วิธีนี้ไม่ถูกเรียกใช้สำหรับการเรนเดอร์เริ่มต้น เราสามารถใช้useEffect()hook ใหม่เพื่อจำลองcomponentDidUpdate()ได้ แต่ดูเหมือนว่าuseEffect()จะถูกเรียกใช้หลังจากการเรนเดอร์ทุกครั้งแม้ในครั้งแรก ฉันจะทำให้มันไม่ทำงานในการเรนเดอร์ครั้งแรกได้อย่างไร ดังที่คุณเห็นในตัวอย่างด้านล่างcomponentDidUpdateFunctionถูกพิมพ์ในระหว่างการเรนเดอร์ครั้งแรก แต่componentDidUpdateClassไม่ได้ถูกพิมพ์ในระหว่างการเรนเดอร์ครั้งแรก function ComponentDidUpdateFunction() { const [count, setCount] = React.useState(0); React.useEffect(() => { console.log("componentDidUpdateFunction"); }); return ( <div> <p>componentDidUpdateFunction: {count} times</p> <button onClick={() => { setCount(count + 1); }} > Click Me </button> </div> ); } class ComponentDidUpdateClass extends React.Component { constructor(props) { …

95 javascript  reactjs  react-hooks 

ฉันกำลังแยกตัวอย่างสิ่งที่ต้องทำของ Redux เพื่อพยายามทำความเข้าใจ ฉันอ่านว่าmapDispatchToPropsช่วยให้คุณสามารถจับคู่การดำเนินการจัดส่งเป็นอุปกรณ์ประกอบฉากได้ดังนั้นฉันจึงคิดว่าaddTodo.jsจะเขียนใหม่เพื่อใช้ mapDispatchToProps แทนการเรียกการจัดส่ง (addTodo ()) addingTodo()ผมเรียกมันว่า สิ่งนี้: import React from 'react'; import {connect} from 'react-redux'; import addTodo from '../actions'; let AddTodo = ({addingTodo}) => { let input; return ( <div> <form onSubmit={e => { e.preventDefault() if (!input.value.trim()) { return } addingTodo(input.value) input.value = "" }}> <input ref={node …

95 javascript  reactjs  redux  react-redux 

ฉันต้องการเรียกวิธีที่เปิดเผยโดยองค์ประกอบการตอบสนองจากอินสแตนซ์ขององค์ประกอบการตอบสนอง ตัวอย่างเช่นในjsfiddleนี้ ฉันต้องการเรียกalertMessageวิธีการจากการHelloElementอ้างอิง มีวิธีที่จะบรรลุโดยไม่ต้องเขียนห่อเพิ่มเติมหรือไม่? แก้ไข (คัดลอกโค้ดจาก JSFiddle) <div id="container"></div> <button onclick="onButtonClick()">Click me!</button> var onButtonClick = function () { //call alertMessage method from the reference of a React Element! Something like HelloElement.alertMessage() console.log("clicked!"); } var Hello = React.createClass({displayName: 'Hello', alertMessage: function() { alert(this.props.name); }, render: function() { return React.createElement("div", null, "Hello …

95 reactjs 

นอกเหนือจากความสามารถในการตั้งค่า "activeClassName" และ "activeStyle" บน NavLink แล้วมีเหตุผลใดบ้างที่จะใช้NavLinkผ่านลิงก์เมื่อสร้างลิงก์ไปยังเส้นทางอื่น ๆ บนองค์ประกอบที่ไม่ใช่การนำทาง (เช่นไม่ใช่การนำทางหลักในส่วนหัวหรือส่วนท้าย) บนไซต์ของคุณ ที่ไม่ต้องการสถานะ / คลาสที่ใช้งานอยู่?

95 reactjs  react-router  react-router-v4 

ฉันใหม่ใน ReactJS และฉันต้องการนำเข้าภาพในส่วนประกอบ รูปภาพเหล่านี้อยู่ในโฟลเดอร์สาธารณะและฉันไม่รู้วิธีเข้าถึงโฟลเดอร์จากคอมโพเนนต์การตอบสนอง ความคิดใด ๆ ? แก้ไข ฉันต้องการนำเข้ารูปภาพภายใน Bottom.js หรือ Header.js โฟลเดอร์โครงสร้างคือ: ฉันไม่ได้ใช้ webpack ฉันควร ? แก้ไข 2 ฉันต้องการใช้ webpack เพื่อโหลดรูปภาพและเนื้อหาที่เหลือ ดังนั้นในโฟลเดอร์ config ของฉันฉันมีไฟล์ถัดไป: ฉันต้องเพิ่มเส้นทางของรูปภาพที่ไหนและทำอย่างไร ขอบคุณ

95 javascript  reactjs 

ตอนนี้ฉันกำลังทำ React อยู่และฉันสงสัยว่ามีวิธี "ที่ถูกต้อง" ในการจัดแต่งทรงผมตามเงื่อนไขหรือไม่ ในบทช่วยสอนพวกเขาใช้ style={{ textDecoration: completed ? 'line-through' : 'none' }} ฉันไม่ต้องการใช้การจัดแต่งทรงผมแบบอินไลน์ดังนั้นฉันจึงต้องการใช้คลาสเพื่อควบคุมการจัดแต่งทรงผมตามเงื่อนไขแทน วิธีคิดแบบ React นี้จะเป็นอย่างไร หรือฉันควรใช้วิธีการจัดแต่งทรงผมแบบอินไลน์นี้?

95 javascript  reactjs 

ฉันต้องการถามว่าตอบสนองอย่างไรที่จับแบบเนทีฟหรือทำฟอนต์ที่ตอบสนอง ตัวอย่างเช่นใน iphone 4s ฉันมี fontSize: 14 ในขณะที่ใน iphone 6 ฉันมี fontSize: 18

95 ios  reactjs  react-native 

ฉันเพิ่งเริ่มใช้ React และฉันกำลังพยายามนำเข้าDATAตัวแปรJSON จากไฟล์ภายนอก ฉันได้รับข้อผิดพลาดต่อไปนี้: ไม่พบโมดูล "./customData.json" ใครช่วยฉันได้บ้าง ใช้งานได้ถ้าฉันมีDATAตัวแปรของฉันindex.jsแต่ไม่ใช่เมื่ออยู่ในไฟล์ JSON ภายนอก index.js import React, {Component} from 'react'; import ReactDOM from 'react-dom'; import customData from './customData.json'; import Profile from './components/profile'; import Hobbies from './components/hobbies'; class App extends Component { render() { return ( <div> <Profile name={this.props.profileData.name}imgUrl={this.props.profileData.imgURL} /> <Hobbies hobbyList={this.props.profileData.hobbyList}/> </div> ); …

95 javascript  json  reactjs 

ฉันกำลังพยายามแยกองค์ประกอบการนำเสนอออกจากส่วนประกอบคอนเทนเนอร์ ฉันมีSitesTableและSitesTableContainer. คอนเทนเนอร์มีหน้าที่ทริกเกอร์การกระทำซ้ำซ้อนเพื่อดึงข้อมูลไซต์ที่เหมาะสมตามผู้ใช้ปัจจุบัน ปัญหาคือผู้ใช้ปัจจุบันถูกดึงข้อมูลแบบอะซิงโครนัสหลังจากที่ส่วนประกอบคอนเทนเนอร์ได้รับการแสดงผลในตอนแรก ซึ่งหมายความว่าส่วนประกอบคอนเทนเนอร์ไม่ทราบว่าจำเป็นต้องเรียกใช้โค้ดอีกครั้งในcomponentDidMountฟังก์ชันซึ่งจะอัปเดตข้อมูลเพื่อส่งไปยังไฟล์SitesTable. ฉันคิดว่าฉันจำเป็นต้องเรนเดอร์คอมโพเนนต์คอนเทนเนอร์อีกครั้งเมื่อมีการเปลี่ยนแปลงอุปกรณ์ประกอบฉาก (ผู้ใช้) ฉันจะทำอย่างไรให้ถูกต้อง? class SitesTableContainer extends React.Component { static get propTypes() { return { sites: React.PropTypes.object, user: React.PropTypes.object, isManager: React.PropTypes.boolean } } componentDidMount() { if (this.props.isManager) { this.props.dispatch(actions.fetchAllSites()) } else { const currentUserId = this.props.user.get('id') this.props.dispatch(actions.fetchUsersSites(currentUserId)) } } render() { return <SitesTable sites={this.props.sites}/> } } …

95 reactjs  redux  react-redux 

โดยพื้นฐานแล้วฉันมีส่วนประกอบของปฏิกิริยาrender()ร่างกายของมันมีหน้าที่ดังต่อไปนี้: (มันเป็นสิ่งที่ดีที่สุดของฉันซึ่งหมายความว่ามันใช้ไม่ได้ในขณะนี้) render(){ return ( <div> <Element1/> <Element2/> // note: code does not work here if (this.props.hasImage) <MyImage /> else <OtherElement/> </div> ) }

94 reactjs