Als «react-jsx» getaggte Fragen

Ich versuche, den richtigen Weg zu finden, um einige Komponenten zu definieren, die generisch verwendet werden könnten: <Parent> <Child value="1"> <Child value="2"> </Parent> Es gibt eine Logik für die Darstellung zwischen Eltern und Kindern Komponenten natürlich geht,...

Ich habe ein externes (für die Komponente) beobachtbares Objekt, auf das ich nach Änderungen warten möchte. Wenn das Objekt aktualisiert wird, werden Änderungsereignisse ausgegeben, und dann möchte ich die Komponente erneut rendern, wenn eine Änderung erkannt wird. Mit einer obersten Ebene war...

Mir ist bewusst, dass Sie Stile in React-Klassen wie folgt angeben können: var MyDiv = React.createClass({ render: function() { var style = { color: 'white', fontSize: 200 }; return <div style={style}> Have a good and productive day! </div>; } }); Sollte ich versuchen, alle Stile auf...

Ich lese den Abschnitt Formulare vonreagierenDokumentation und habe gerade diesen Code ausprobiert, um die onChangeVerwendung zu demonstrieren ( JSBIN ). var React= require('react'); var ControlledForm= React.createClass({ getInitialState: function() { return { value: "initial value" }; },...

Ich habe ein relativ einfaches Problem beim Versuch, einer React-Komponente Inline-Skripte hinzuzufügen. Was ich bisher habe: 'use strict'; import '../../styles/pages/people.scss'; import React, { Component } from 'react'; import DocumentTitle from 'react-document-title'; import { prefix } from...

Wie füge ich optional ein Element in JSX ein? Hier ist ein Beispiel für die Verwendung eines Banners, das sich in der Komponente befinden sollte, wenn es übergeben wurde. Ich möchte vermeiden, dass HTML-Tags in der if-Anweisung dupliziert werden müssen. render: function () { var banner; if...

Ich baue etwas mit React, wo ich HTML mit React Variables in JSX einfügen muss. Gibt es eine Möglichkeit, eine Variable wie diese zu haben: var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>'; und es einzufügen, um so zu reagieren, und hat es...

Ich versuche, Komponenten basierend auf ihrem Typ dynamisch zu rendern. Beispielsweise: var type = "Example"; var ComponentName = type + "Component"; return <ComponentName />; // Returns <examplecomponent /> instead of <ExampleComponent /> Ich habe die hier vorgeschlagene Lösung...

Ich versuche, eine jQuery-Komponente in React.js zu konvertieren, und eines der Dinge, mit denen ich Schwierigkeiten habe, ist das Rendern von n Elementen basierend auf einer for-Schleife. Ich verstehe, dass dies nicht möglich oder empfohlen ist und dass die Verwendung eines Arrays im Modell...

Ich habe gerade angefangen, React zu untersuchen, indem ich eine Komponente mit einer einfachen Renderfunktion hinzugefügt habe: render() { return <div class="myApp"></div> } Wenn ich die App starte, wird folgende Fehlermeldung angezeigt: Warning: Unknown DOM property class. Did you...

Ich versuche, eine Site in ReactJS zu erstellen. Als ich jedoch versuchte, mein JS in eine separate Datei zu stellen, wurde der folgende Fehler angezeigt: "Nicht erfasster Syntaxfehler: Unerwartetes Token <". Ich habe versucht /** @jsx React.DOM */, oben in die JS-Datei einzufügen, aber es wurde...

Ich habe eine Datei test_stuff.js, mit der ich laufe npm test Es sieht so ziemlich so aus: import { assert } from 'assert'; import { MyProvider } from '../src/index'; import { React } from 'react'; const myProvider = ( <MyProvider> </MyProvider> ); describe('Array', function() {...

Ich verwende Sublime Text als Texteditor. Es gibt ein jsFormat zum Formatieren von Javascript-Dateien, aber ich kann keines für JSX finden. Wie geht ihr mit der Formatierung von JSX

Ich verstehe, wie (und warum ) ein Leerzeichen in JSX hinzugefügt werden soll, aber ich frage mich, was die beste Vorgehensweise ist oder ob eine wirklich einen Unterschied macht. Wickeln Sie beide Elemente in eine Spanne <div className="top-element-formatting"> <span>Hello...

Ich möchte binden, um das aktive React-Bootstrap-Popover beim escapeDrücken zu schließen. Hier ist der Code _handleEscKey:function(event){ console.log(event); if(event.keyCode == 27){ this.state.activePopover.hide(); } }, componentWillMount:function(){