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

รับองค์ประกอบง่าย ๆ ที่ทำให้ลูก ๆ ของมัน: class ContainerComponent extends Component { static propTypes = { children: PropTypes.object.isRequired, } render() { return ( <div> {this.props.children} </div> ); } } export default ContainerComponent; คำถาม: เสาประเภทของเสาควรเป็นอย่างไร? เมื่อฉันตั้งเป็นวัตถุมันล้มเหลวเมื่อฉันใช้องค์ประกอบที่มีลูกหลายคน: <ContainerComponent> <div>1</div> <div>2</div> </ContainerComponent> คำเตือน: ไม่ประเภทเสา: เสาที่ไม่ถูกต้องchildrenจากประเภทarray จ่ายให้กับคาดว่าContainerComponentobject ถ้าฉันตั้งค่าเป็นอาร์เรย์มันจะล้มเหลวถ้าฉันให้ลูกเพียงคนเดียวคือ: <ContainerComponent> <div>1</div> </ContainerComponent> คำเตือน: โพรโทคอลที่ล้มเหลว: โพรไฟล์ลูกไม่ถูกต้องของออบเจ็กต์ประเภทที่จัดหาให้กับ ContainerComponent, อาร์เรย์ที่คาดไว้ …

265 reactjs  jsx  react-proptypes 

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

211 reactjs  jsx 

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

176 javascript  reactjs  jsx  react-hooks 

ฉันพยายามเขียนองค์ประกอบ React สำหรับแท็กส่วนหัว html (h1, h2, h3, ฯลฯ ... ) ซึ่งลำดับความสำคัญหัวเรื่องเปลี่ยนแปลงแบบไดนามิกตามลำดับความสำคัญที่เราได้กำหนดไว้ในอุปกรณ์ประกอบฉาก นี่คือสิ่งที่ฉันพยายามทำ <h{this.props.priority}>Hello</h{this.props.priority}> ผลลัพธ์ที่คาดหวัง: <h1>Hello</h1> สิ่งนี้ไม่ทำงาน มีวิธีใดที่เป็นไปได้ในการทำเช่นนี้?

163 reactjs  jsx 

นี่คือสิ่งที่ฉันพยายามและมันผิดพลาดอย่างไร งานนี้: <div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} /> สิ่งนี้ไม่: <div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /> คุณสมบัติคำอธิบายเป็นเพียงสตริงปกติของเนื้อหา HTML อย่างไรก็ตามมันแสดงผลเป็นสตริงไม่ใช่ HTML ด้วยเหตุผลบางประการ ข้อเสนอแนะใด ๆ

160 javascript  html  reactjs  jsx 

อยากรู้ว่าทางที่ถูกต้องในการเข้าหาคือ: var Hello = React.createClass({ getInitialState: function() { return {total: 0, input1:0, input2:0}; }, render: function() { return ( <div>{this.state.total}<br/> <input type="text" value={this.state.input1} onChange={this.handleChange} /> <input type="text" value={this.state.input2} onChange={this.handleChange} /> </div> ); }, handleChange: function(e){ this.setState({ ??? : e.target.value}); t = this.state.input1 + this.state.input2; this.setState({total: t}); } }); React.renderComponent(<Hello />, …

142 javascript  reactjs  jsx 

ฉันมีส่วนประกอบการทำงานที่ง่ายมากดังนี้: import * as React from 'react'; export interface AuxProps { children: React.ReactNode } const aux = (props: AuxProps) => props.children; export default aux; และส่วนประกอบอื่น: import * as React from "react"; export interface LayoutProps { children: React.ReactNode } const layout = (props: LayoutProps) => ( <Aux> <div>Toolbar, SideDrawer, Backdrop</div> <main> …

142 reactjs  typescript  jsx  typescript2.0 

ฉันใช้ผ้าสำลีกับแอป React ของฉันและฉันได้รับข้อผิดพลาดนี้: error JSX props should not use arrow functions react/jsx-no-bind และนี่คือที่ที่ฉันเรียกใช้ฟังก์ชันลูกศร (ด้านในonClick): {this.state.photos.map(tile => ( <span key={tile.img}> <Checkbox defaultChecked={tile.checked} onCheck={() => this.selectPicture(tile)} style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}} /> <GridTile title={tile.title} subtitle={<span>by <b>{tile.author}</b></span>} actionIcon={<IconButton onClick={() => this.handleDelete(tile)}><Delete color="white"/></IconButton>} > <img onClick={() => this.handleOpen(tile.img)} …

103 javascript  reactjs  ecmascript-6  jsx  arrow-functions 

ฉันใช้แท็ก & nbsp ใน jsx และไม่แสดงช่องว่าง ต่อไปนี้เป็นข้อมูลโค้ดของฉันเล็กน้อยโปรดช่วยด้วย var Reporting=React.createClass({ render: function(){ return( <div style={divPositionReporting}> <p>Pricing Reports</p> <hr></hr> Select Scenario:   <select> <option></option> </select> <button type="button">Get Pricing Report</button> <br/> Select Takeout Scenario:  <select> <option></option> </select> <button type="button">Get Pricing Report</button> <br/> </div> ); }, });

101 html  reactjs  jsx 

ฉันกำลังทำงานกับโปรเจ็กต์ที่มี 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 

ฉันมีองค์ประกอบช่องทำเครื่องหมาย TSX (JSX): <input type="checkbox" name={i.toString()} onClick={this.handleCheckboxClick} /> ด้วยความช่วยเหลือของรหัส VS ฉันรู้ว่าประเภทพารามิเตอร์อินพุตของthis.handleCheckboxClickคือMouseEvent<HTMLInputElement>. ดังนั้นฉันจึงใช้มันด้วย: private handleCheckboxClick(event: MouseEvent<HTMLInputElement>) { ... } จากนั้นฉันได้รับข้อผิดพลาดแจ้งว่า[ts] Type 'MouseEvent' is not generic.ดังที่แสดงในภาพด้านล่าง: เวอร์ชันของแพ็คเกจของฉัน: "@types/react": "^15.0.29", "@types/react-dom": "^15.5.0", "react": "^15.6.1", "react-dom": "^15.6.1", "typescript": "^2.3.4", ทำไมถึงเป็นเช่นนั้น?

92 reactjs  typescript  events  types  jsx 

ฉันตั้งค่าeslint& eslint-plugin-react. เมื่อฉันเรียกใช้ ESLint ลินเตอร์จะส่งกลับno-unused-varsข้อผิดพลาดสำหรับส่วนประกอบปฏิกิริยา ฉันสมมติว่าไม่รู้จักว่าฉันกำลังใช้ JSX หรือ React syntax ความคิดใด ๆ ? ตัวอย่าง: app.js import React, { Component } from 'react'; import Header from './header.js'; export default class App extends Component { render() { return ( <div> <Header /> {this.props.children} </div> ); } } ข้อผิดพลาดของ Linter: /my_project/src/components/app.js 1:8 error …

91 javascript  reactjs  jsx  eslint