Als «jsx» getaggte Fragen

Bei Fragen zur JSX-Syntax, die von React.js, Vue und anderen Front-End-JavaScript-Frameworks verwendet wird, mit denen Inline-XML-Literale in JavaScript zur Beschreibung von HTML-Elementen verwendet werden können. Wenn Ihre Frage die erweiterte Implementierung von JavaScript (ExtendScript) durch Adobe betrifft, die mindestens fünf Jahre älter als React.js ist, verwenden Sie stattdessen das Tag [ExtendScript].

7
ReactJs: Was sollten die PropTypes für this.props.children sein?
Angesichts einer einfachen Komponente, die ihre Kinder rendert: class ContainerComponent extends Component { static propTypes = { children: PropTypes.object.isRequired, } render() { return ( <div> {this.props.children} </div> ); } } export default ContainerComponent; Frage: Was soll der PropTyp der Kinder-Requisite sein? Wenn ich es als Objekt festlege, schlägt es fehl, …
6
ReactJS - .JS vs .JSX
Es gibt etwas, das ich bei der Arbeit sehr verwirrend finde React. Im Internet gibt es viele Beispiele, die .jsDateien mit Reaktion verwenden, aber viele andere verwenden .jsxDateien. Ich habe über .jsxDateien gelesen und mein Verständnis ist, dass Sie damit nur HTML-Tags in Ihre schreiben können javascript. Das Gleiche kann …
211 reactjs  jsx 
13
Wie verwende ich componentWillMount () in React Hooks?
In den offiziellen Dokumenten von React wird erwähnt - Wenn Sie mit den Lebenszyklusmethoden der React-Klasse vertraut sind, können Sie sich useEffect Hook als die Komponenten componentDidMount, componentDidUpdate und componentWillUnmount vorstellen. Meine Frage ist - wie können wir die componentWillMount()Lifecyle-Methode in einem Hook verwenden?
5
Dynamischer Tag-Name in jsx und React
Ich versuche eine React-Komponente zu schreiben. für HTML-Überschriften-Tags (h1, h2, h3 usw.), bei denen sich die Überschriftenpriorität basierend auf der in den Requisiten definierten Priorität dynamisch ändert. Hier was ich versuche zu tun. <h{this.props.priority}>Hello</h{this.props.priority}> erwartete Ausgabe: <h1>Hello</h1> Das funktioniert nicht. Gibt es eine mögliche Methode, um dies zu tun?
162 reactjs  jsx 
11
Rendern Sie eine HTML-Zeichenfolge als echtes HTML in einer React-Komponente
Hier ist, was ich versucht habe und wie es schief geht. Das funktioniert: <div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} /> Das geht nicht: <div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /> Die Beschreibungseigenschaft ist nur eine normale Zeichenfolge von HTML-Inhalten. Es wird jedoch als Zeichenfolge gerendert, aus irgendeinem Grund nicht als HTML. …
158 javascript  html  reactjs  jsx 
21
JSX kann nur verwendet werden, wenn das Flag '--jsx' angegeben ist
Ich habe mich ein bisschen nach einer Lösung für dieses Problem umgesehen. Alle schlagen vor "jsx": "react", Ihrer tsconfig.json-Datei etwas hinzuzufügen. Was ich getan habe. Ein anderer war hinzuzufügen "include: []", was ich auch getan habe. Ich erhalte jedoch immer noch den Fehler, wenn ich versuche, .tsxDateien zu bearbeiten . …
152 reactjs  typescript  jsx  tsx 
11
React.js: Identifizieren verschiedener Eingaben mit einem onChange-Handler
Neugierig, wie man das richtig angeht: 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: …
141 javascript  reactjs  jsx 
12
TypeScript and React - Kinder tippen?
Ich habe eine sehr einfache Funktionskomponente wie folgt: import * as React from 'react'; export interface AuxProps { children: React.ReactNode } const aux = (props: AuxProps) => props.children; export default aux; Und noch eine Komponente: import * as React from "react"; export interface LayoutProps { children: React.ReactNode } const layout …
6
Warum sollten JSX-Requisiten keine Pfeilfunktionen verwenden oder binden?
Ich verwende mit meiner React-App Flusen und erhalte folgende Fehlermeldung: error JSX props should not use arrow functions react/jsx-no-bind Und hier führe ich die Pfeilfunktion (innen onClick) aus: {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)'}} /> …
6
& nbsp jsx funktioniert nicht
Ich verwende das & nbsp-Tag in jsx und es rendert den Speicherplatz nicht. Das Folgende ist ein kleiner Ausschnitt meines Codes. Bitte helfen Sie. 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> …
95 html  reactjs  jsx 
3
Warum ist das `MouseEvent` im Checkbox-Ereignishandler nicht generisch?
Ich habe ein Kontrollkästchen TSX (JSX) -Element: <input type="checkbox" name={i.toString()} onClick={this.handleCheckboxClick} /> Mit Hilfe von VS-Code weiß ich, dass der Eingabeparametertyp der this.handleCheckboxClickist MouseEvent<HTMLInputElement>. Also habe ich es implementiert mit: private handleCheckboxClick(event: MouseEvent<HTMLInputElement>) { ... } Dann erhalte ich die Fehlermeldung [ts] Type 'MouseEvent' is not generic.Wie im Bild unten …
2
Typoskript + Reagieren / Reduzieren: Die Eigenschaft "XXX" ist für den Typ "IntrinsicAttributes & IntrinsicClassAttributes" nicht vorhanden
Ich arbeite an einem Projekt mit Typescript, React und Redux (alle in Electron) und bin auf ein Problem gestoßen, wenn ich eine klassenbasierte Komponente in eine andere einbeziehe und versuche, Parameter zwischen ihnen zu übergeben. Ich habe die folgende Struktur für die Containerkomponente: class ContainerComponent extends React.Component<any,any> { .. render() …
6
ESLint with React gibt "no-unused-vars" -Fehler aus
Ich habe eslint& eingerichtet eslint-plugin-react. Wenn ich ESLint ausführe, gibt der Linter no-unused-varsFehler für jede React-Komponente zurück. Ich gehe davon aus, dass nicht erkannt wird, dass ich JSX- oder React-Syntax verwende. Irgendwelche Ideen? Beispiel: app.js. import React, { Component } from 'react'; import Header from './header.js'; export default class App …
14
Native reagieren - Image Require-Modul mit dynamischen Namen
Ich erstelle gerade eine Test-App mit React Native. Das Image-Modul hat bisher einwandfrei funktioniert. Wenn ich beispielsweise ein Bild mit dem Namen hatte avatar, funktioniert das folgende Codefragment einwandfrei. <Image source={require('image!avatar')} /> Aber wenn ich es in eine dynamische Zeichenfolge ändere, bekomme ich <Image source={require('image!' + 'avatar')} /> Ich bekomme …
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.