Tag: jsx

JSX ist ein open-source-Programmiersprache, oder eine AltJS mit Klassen und statische Typen. Der source code wird kompiliert in JavaScript, das ist in hohem Maße optimiert. Für Fragen zu Reagieren, verwenden Sie [reagieren-jsx] statt!

Konvertieren Reagieren-Funktion component class component-Ausgabe

2 Antworten

Habe ich Folgendes reagieren funktionale Komponente zur Unterstützung der Authentifizierung erforderlich, Routen mit reagieren-router. const PrivateRoute = ({ component: Component, ...rest }) => ( <Route {...rest} render={props => ( isAuthenticated() ? ( <Component {...props}/> ) : (

Wie wertet einen string mit Variablen in einen reagieren Komponente?

2 Antworten

Ich habe einen string mit einer variable innerhalb: var template = '<div>Hello {username}</div>'; Wird der Benutzername durch den Staat, wie zum Parsen dieses Strings und schalten Sie es in einen reagieren Komponente? Gibt es einen Grund, Sie

jsx reactjs

Wie kann ich Attribute hinzufügen, um die vorhandenen HTML-Elemente im Typoskript/JSX?

4 Antworten

Jemand wissen, wie Sie richtig hinzufügen/erweitern, werden alle systemeigenen HTML-element Attribute mit benutzerdefinierten lieben? Mit das Typoskript Dokumentation für die Zusammenführung der Schnittstellen, ich dachte, ich könnte das einfach machen: interface HTMLElement { block?: BEM.Block; element?: BEM.Element;

jsx typescript

Photoshop: Wie kann ich die ausführen / aufrufen einer JSX-Skript aus einem anderen JSX-script in Photoshop?

2 Antworten

Habe ich Variablen und strings in eine JSX das Skript, das ich verwenden möchte, in einem anderen JSX-script in Photoshop. Wollte ich nur re-run der ersten Skripts in das zweite und erhalten den Variablen gibt, Weg. Wie

javascript jsx photoshop

JSX-Dateien erstellen-reagieren-app

1 Antworten

Nur gefragt, wie man erstellen-reagieren-app verwendet .js-Dateien statt .jsx für jsx-markup. Ist es wegen der besonderen webpack-Konfiguration? Btw, wo finde ich das webpack und babel Konfiguration von meinem Projekt erstellt mit create-reagieren-app? InformationsquelleAutor Andrei Tarutin | 2017-02-07

create-react-app javascript jsx reactjs webpack

Rendering-JSON-API reagieren Mit map-Methode

2 Antworten

Ich habe Schwierigkeiten mit der syntax und der Struktur von JSON-Objekten/arrays und map-Methode. Ich bin neu zu Reagieren und auf einer ersten Stufe des Lernens. Dies ist die JSON-Datei code, den ich eingefügt unter: [ { "cloud":"Asia",

ecmascript-6 json jsx reactjs

wie zu verwenden eine Funktion aus einer anderen js-Datei in reactjs?

4 Antworten

ich habe eine Datei something.js hat eine Funktion: someFunction: function(arg1, arg2){ //code blocks } In meinem app.js Datei, die ich wollen, rufen Sie diese Funktion in der app Klasse. Ich habe importiert die something.js - Datei wie

javascript jsx reactjs

Photoshop-Skript - Größe der Bilder in Ordner (Dialogfeld)

1 Antworten

ich würde gerne wissen, ob es einen einfachen Weg zu schreiben, ein einfaches Skript in Photoshop. Ich würde es gerne zu pop ein Dialogfeld Benutzer wählen Sie einen Ordner. Dann werden die Skripte erstellt einen neuen Ordner

batch-file javascript jsx photoshop resize

Ändern Sie Bild auf schweben in JSX

2 Antworten

Wie ändere ich ein Bild auf hover im JSX Ich versuche, so etwas wie dieses: <img src={require('../../../common/assets/network-inactive.png')} onMouseOver={this.src = require('../../../common/assets/network.png')} onMouseOut={this.src = require('../../../common/assets/network-inactive.png')} /> InformationsquelleAutor new-boy-in-web-dev-business | 2018-02-09

javascript jsx onmouseout onmouseover reactjs

ReactJS Komponente Höhe '100%'

3 Antworten

Möchte ich mein die unmittelbar untergeordneten Knoten des <div id='root'> zu height: 100% allerdings merkte ich reagieren, ist das hinzufügen eine zusätzliche Schicht reagieren Knoten Verhinderung des Kindes height: 100% von der Arbeit. Beispiel unten: <html> <body>

jsx reactjs

Gibt es eine Möglichkeit Sie zu installieren, die JSX-syntax-highlights/syles für Notepad++?

1 Antworten

Ich bin mit Notepad++ und ich habe gerade angefangen zu lernen, Reagieren, js und JSX-syntax-Erweiterung aber nicht mit der styling macht es schwierig zu Lesen. Ich bin mir nicht sicher, Ob ich es umsetzen konnte, die Stile

babel jsx notepad++reactjs

JSX Karte nur das erste Objekt im array

2 Antworten

Ich bin neugierig, wie Sie nur leisten, das erste Objekt in einem array mit .map in JSX. {this.state.data.map(data => <span className="fooBar"> <a href={data.foo}>{data.bar}</a> </span> )} Danke! InformationsquelleAutor Samantha Ingram | 2016-05-26

jsx reactjs

React.js Dateien syntax in sublime text 3

3 Antworten

bin ich mit sublime text 3 als mein code-editor,die ich geschrieben habe, ein basic-Beispiel "hello world" in zu Reagieren.aber die Färbung ist unanständig, auf den code ,ich habe versucht, die Installation von Babel-plugin aber auch nach, dass

babel javascript jsx reactjs sublimetext3

Zu machen, wie die Bild-Tasten in JSX?

2 Antworten

Dieser kein Bild anzeigt, aber immer noch funktioniert wie eine Schaltfläche. <button><img src={"./img/google.png"} /></button> Meine Ordner setup /user/img/google.png und /user/loginGoogle.jsx , also ich glaube nicht, dass es ein problem mit der Quelle InformationsquelleAutor dovla | 2016-03-20

jsx react-jsx reactjs

Wie man eine verschachtelte if-else-Anweisung in reactjs JSX?

5 Antworten

Ich wollte wissen, ob seine mögliche zu tun, verschachtelte if-else if-in reactjs jsx? Ich habe versucht, verschiedene Möglichkeiten, und ich bin nicht in der Lage, um es an die Arbeit. Ich bin auf der Suche nach if

ecmascript-6 javascript jsx reactjs

Beste Weg, um build/compile/deploy ReactJS Produktion

1 Antworten

Ich bin neu reactJS, und versuche zu verstehen, was ist der beste Weg, um zu implementieren Sie den code für die Produktion. Als pro den link, ich bin Gebäude mit babel als code unten, aber ich Frage

jsx react-jsx reactjs

Was bedeuten die geschweiften Klammern bedeuten in JSX (Reagieren)?

3 Antworten

Für ein Beispiel, um einen Stil zu reagieren, die Sie tun könnten var css = {color: red} und <h1 style={css}>Hello world</h1> Warum müssen Sie die geschweiften Klammern um css-Code in der zweiten code-snippet? InformationsquelleAutor EverRip | 2017-05-11

ecmascript-6 javascript jsx reactjs

JSX Requisiten nicht verwenden sollten .bind()

3 Antworten

So beheben Sie diese Fehlermeldung, wenn ich die Bindung auf diese Weise: früher Bindung im Konstruktor gelöst, aber das ist etwas Komplex für mich: {this.onClick.bind(this, 'someString')}> and <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}> InformationsquelleAutor monkeyjs | 2016-11-23

function-binding jsx react-jsx reactjs

ReactJS-Komponente für HTML5-video

1 Antworten

Ich versuche, video in meine web-Seite mit HTML - <video> tag mit ReactJS und JSX. Bisher ist noch nichts zu spielen, obwohl meine Komponente den Pfad zu der Datei IntroVideo diese.Requisiten: { introVideo: "assets/media/Cherngloong_website_intro_Uz921bT.mp4", muted: "true" }

ecmascript-6 html5-video javascript jsx reactjs

die Fehlermeldung 'Dokument' ist nicht definiert : eslint / Reagieren

3 Antworten

Ich Baue eine app Reagieren, die mit create-reagieren-app. Bekam ich folgende Fehlermeldung bei der Ausführung von ESLint: 8:3 error 'document' is not defined no-undef. Meine app läuft ohne Fehler, aber ich habe diese ESLint Fehler in 2

jestjs jsdom jsx reactjs

Wie zu tun, CSS :hover-Funktion in JSX ?

3 Antworten

Hallo und vielen Dank für die tolle Arbeit hier. Ich bin mit react.js für mein Projekt zu bauen meine Komponenten und ich fühle mich ein wenig stecken in meinem Projekt jetzt. Ich bin versucht, Stil ein button

jsx reactjs

Kind zu Eltern-Kommunikation Reagieren (JSX) ohne Flussmittel

3 Antworten

Ich bin wirklich neues zu Reagieren, und ich bin ziehen meine Haare aus versuchen zu lösen, was scheint mir ein einfaches problem. Hier ist ein Bild von der Komponente, auf die ich aufgebaut habe. Farbe Kommissionierung Komponente

javascript jsx react-jsx reactjs

Reagieren rendering [object object] anstelle der JSX

4 Antworten

Ich versuche zu machen, journal-Einträge, die auf meiner Website mit einem Objekt (nicht-array) und ich habe mich in ein Thema, hier ist meine aktuelle code populateJournal(){ const j = Object.values(this.state.journal); var journalEntries = ''; for (var i

javascript jsx reactjs

Wie verketten von zwei JSX-fragment oder-Variablen oder string-und die Komponente (in Reactjs)?

4 Antworten

Ich weiß JSX kann sehr irreführend sein, weil es aussieht wie strings und es ist nicht, damit der "string" - Begriff in der Frage, auch wenn wir nicht wirklich manipulieren von Zeichenfolgen. Hier ist ein code Beispiel

concatenation jsx reactjs

Sollten Sie nicht verwenden, <Link> außerhalb <Router>

7 Antworten

Ich versuche zum einrichten reagieren-router in einer Beispiel-Anwendung, und ich bekomme die folgende Fehlermeldung: You should not use <Link> outside a <Router> Meine app eingerichtet ist, in etwa so: Übergeordneten Komponente const router = ( <div className="sans-serif">

jsx react-router reactjs

Wie das Rendern einer Komponente mit onClick Reagieren?

1 Antworten

Ich versuche zu Rendern einer Karte von einem bestimmten Ort, die weitergegeben werden von einer übergeordneten Komponente. Ich bin mit der google-maps-reagieren und ich bin mir nicht sicher, von zwei Dingen: So rufen Sie die Funktionen mit

google-maps-react jsx npm reactjs

Übergabe-Objekt als Requisiten zu jsx

4 Antworten

Ich habe ein Objekt mit mehreren gemeinsamen Schlüssel-Wert-Requisiten, die ich geben wollen, um einige jsx. So etwas wie dieses: const commonProps = {myProp1: 'prop1',myProp2: 'prop2'}; <MyJsx commonProps /> Will ich dieser Funktion übergeben von einzelnen Requisiten: <MyJsx

jsx react-props reactjs

wie Erzeuge ein reagieren Komponente mit ReactDOM Rendern

2 Antworten

_Header (cshtml) <div id="Help"></div> export default class Help { ReactDOM.render( <Help/>, document.getElementById('Help') ); } Help.js (component) } Mein Ziel ist es, machen eine Hilfe-Taste auf die Kopfzeile. Habe ich div-tag mit der id helfen -, modal -,

jsx material-ui npm reactjs redux

Erste json-Objekt-Daten mit reagieren

1 Antworten

Ich bin versucht zu ziehen die Daten aus der json wie diese, die importiert werden, als "Werte" { "content": { "person": [ { "name": "Test" "age" : "24: } ] } } Ich bin mit .map wie

json jsx reactjs

Wie man geschachtelte Schleifen mit anzeigen in JSX?

1 Antworten

Kann ich nicht erreichen, haben zwei verschachtelte map: render() { return ( <table className="table"> <tbody> {Object.keys(this.state.templates).map(function(template_name) { return ( <tr key={template_name}><td><b>Template: {template_name}</b></td></tr> {this.state.templates[template_name].items.map(function(item) { return ( <tr key={item.id}><td>{item.id}</td></tr> ) })} ) })} </tbody> </table> ) } Dieser

javascript jsx reactjs

Wie kann ich eine Verbindung zu einer stateless Komponente ref-in Reagieren?

3 Antworten

Bin ich suchen, um eine zustandslose Komponente, die die Eingabe validiert werden können, indem Sie das übergeordnete element. In meinem Beispiel unten habe ich ein problem, wo der Eingang ref ist nie zugewiesen wird, um die Eltern

jsx reactjs typescript

React Native - Bild Benötigen-Moduls über Dynamische Namen

6 Antworten

Ich bin derzeit den Aufbau einer test-app mit React Native. Das Bild-Modul, bisher gut funktioniert. Zum Beispiel, wenn ich ein Bild mit dem Namen avatar im folgenden code-snippet funktioniert einwandfrei. <Image source={require('image!avatar')} /> Aber aber wenn ich

javascript jsx react-native

das öffnen eines modalen mit dem Klick auf eine Schaltfläche

1 Antworten

Den nächsten code verwendet eine Modale reagieren Komponente: export class AddWorkLogEditor extends React.Component { constructor(props) { super(props); this.addWorkLog = this.addWorkLog.bind(this); this.onOpenModal = this.onOpenModal.bind(this); this.onCloseModal = this.onCloseModal.bind(this); this.state = { open:true }; } onOpenModal() { this.setState({open: this.props.openModal}); }

ecmascript-6 jsx modal-dialog reactjs

Reagieren Formular mit Axios post

3 Antworten

Ich habe die Suche seit Tagen das internet ab und kann nicht scheinen zu finden, alles, was im Zusammenhang mit dem senden ein Formular anfordern, über zu Reagieren und mit Axios post zur Eingabe der Informationen für

axios javascript jsx reactjs

Requisiten definiert ist, nicht Reagieren, js

1 Antworten

Ich bin mit reagieren js und ich weiß nicht, warum ich bin immer props ist nicht definiert. Hier ist meine Klasse. import React, { Component } from 'react'; const InputHeight = { height: '50px', } function clearData()

javascript jsx reactjs

Iteration über JSON in Reagieren

3 Antworten

Habe ich folgenden code: export class Highlights extends React.Component { render() { return ( <div> {JSON.stringify(this.props.highlights_data.data)} </div> ) } } Dieser druckt die folgenden: {"active":{"label":"Active","value":"12"},"automatic":{"label":"Automatic","value":"8"},"waiting":{"label":"Waiting","value":"1"},"manual":{"label":"Manual","value":"3"}} Wie kann ich die Iteration über die highlights_data.data Requisiten zum Aufruf einer

javascript jsx reactjs

Warum sollte es nicht JSX props verwenden Sie die Pfeiltasten Funktionen oder binden?

4 Antworten

Ich bin mit lint mit Reagieren meine app, und ich erhalte diese Fehlermeldung: error JSX props should not use arrow functions react/jsx-no-bind Und das ist, wo ich bin mit der Pfeil Funktion (innerhalb onClick): {this.state.photos.map(tile => (

arrow-functions ecmascript-6 javascript jsx reactjs

Reagieren - Erstellen von verschachtelten Komponenten mit Schleifen

7 Antworten

Ich habe ein kleines Problem mit Reagieren. Ich kann nicht erstellen Sie eine verschachtelte Komponente mit einer for-Schleife. Was ich will zu tun ist, erstellen 9 Zellen einer Tabelle und erstellen Sie dann 3 Zeilen mit 3-Zellen

inline javascript jsx loops reactjs

ändern der schriftart-Größe-material-ui-Tasten und mit den Tasten scale?

5 Antworten

Ich scheine zu sein, ein Problem mit dem ändern der schriftart, die Größen, die auf Material-UI ' s (zum Reagieren) RaisedButton und die Schaltfläche selbst skalieren richtig mit ihm. <RaisedButton label={<span className="buttonText">Log in Here</span>} /> CSS: .buttonText

css javascript jsx material-ui reactjs

“Uncaught TypeError: Reagieren.createClass ist nicht eine Funktion" in Render.js Datei (Elektron-app)

2 Antworten

Ich bin neu react.js und ich versuche, um diesen code zu erhalten, ersetzen Sie eine Zeile in einer html-Datei in ein Elektron-app mit dem, was wird im Gegenzug innerhalb der MainInterface variable Dies ist mein Render.js Datei

electron javascript jsx package.json react-dom

Reagieren Native: Wie <TextInput/>'s Höhe und Breite </> - Containers?

3 Antworten

Ich habe derzeit eine <TextInput> innerhalb einer <View> hat eine padding: 15. Ich möchte für das <TextInput>'s Breite und Höhe, um allen Raum in <View> außer der Polsterung. Also versuchte ich var width = Dimensions.get('window').width und die

css javascript jsx react-native reactjs

Geben Sie ein/Legen Sie die Breite und Höhe auf einen reagieren-boostrap modal

1 Antworten

Wie kann ich eine dynamische Breite und Höhe, um einen reagieren-bootstrap-modal-Fenster? Ich habe die reagieren-bootstrap docs hier aber konnte nicht herausfinden, wie das zu tun. Tatsächlich wird der Wert von Breite und Höhe Requisiten wäre dynamisch (alle

jsx react-bootstrap size

Reagieren-router 2.0 browserHistory funktioniert nicht, wenn erfrischend

5 Antworten

Unten-codes Bericht 404 nicht gefunden beim aktualisieren auf Seite http://localhost/about. Aber wenn browserHistory geändert hashHistory, es funktioniert gut. Hier sind meine js-Datei. import React, {Component} from 'react'; import ReactDOM from 'react-dom'; import { Router, Route, IndexRoute, Link,

jsx react-router reactjs

erstellen Sie reagieren-app nicht geladen, css hintergrund-Bilder in dev oder bauen

3 Antworten

Ich habe Schwierigkeiten mit einigen hintergrund-Bilder nicht laden. Ich habe einige bedeutende änderungen für die erste Erstellung reagieren app, meine Ordner-Struktur ist nun wie folgt: Hinweis: die ich ausgelassen habe, einige Dateien & Ordner, wenn Sie mehr

create-react-app ecmascript-6 javascript jsx reactjs

Wie Sie einen Klassennamen/id zu Reagieren-Bootstrap-Komponente?

2 Antworten

Nehmen wir an, wir sind mit Reihe von Reagieren-Bootstrap..., Wie wir es Stil ohne Verwendung einer Hülle oder innere element: <Row> <div className='some-style'> ... </Row> Idealerweise könnten wir gerade tun: <Row className='some-style> ... </Row> Aber das funktioniert

jsx react-bootstrap reactjs

Visual studio-code-änderungen-format (Reagieren-JSX)

8 Antworten

Habe ich folgenden Schnipsel in meine index.js class App extends Component { render() { return ( <div style = { styles.app } > Welcome to React! </div> ) } } Der code funktioniert, aber jedes mal, wenn

jsx reactjs visual-studio-code

Set Komponente props dynamisch

2 Antworten

Ich brauche, um Komponente Requisiten, nachdem es in einer Variablen gespeichert ist, ist hier pseudo-code: render(){ let items = [{title:'hello'}, {title:'world'}]; let component = false; switch (id) { case 1: component = <A /> break; case 2:

jsx react-jsx reactjs

forEach über es6 Karte in JSX

4 Antworten

Hatte ich ein javascript-array, wurde die rendering-Komponenten mit array.map. Ich wechselte dieses array an ein es6 Map um der Lage sein zu verwenden Schlüssel-Wert-Paare, um Elemente zu finden, die mehr leicht, und wechselte von einem .map zu

foreach javascript jsx

Mit async setState

5 Antworten

Habe ich-Funktion, die ausgelöst, eine Aktion. Ich möchte eine Anzeige des loader vor und nach der Aktion. Ich weiß, die reagieren Komponieren das übergebene Objekt setState. die Frage ist, wie kann ich aktualisieren Sie die Immobilie in

jsx react-jsx reactjs

Iterieren verschachtelte Objekte und render-innen jsx?

2 Antworten

Wie kann ich machen eine geschachtelte Landkarte in meinem jsx-Komponente? Ich tun müssen, um das äquivalent von einer javascript for(key in groupItem){} Siehe unten. class MyComponent extends React.Component { render () { var options = this.props.options; return

ecmascript-6 javascript jsx reactjs