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, können Sie sich vorstellen , <select>und <option>als ein Beispiel dieser Logik. Dies ist …

888 javascript  reactjs  react-jsx 

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 React.renderdies möglich, aber innerhalb einer Komponente funktioniert es …

687 reactjs  react-jsx 

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 diese Weise zu erstellen, …

512 css  reactjs  inline-styles  react-jsx 

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" }; }, handleChange: function(event) { console.log(this.state.value); this.setState({value: event.target.value}); console.log(this.state.value); }, render: function() { return ( <input …

326 javascript  reactjs  react-jsx 

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 '../../core/util'; export default class extends Component { render() { return ( <DocumentTitle title="People"> <article …

265 javascript  reactjs  ecmascript-6  react-jsx 

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 (this.state.banner) { banner …

229 javascript  reactjs  react-jsx 

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 funktionieren? render: function() { return ( <div …

203 javascript  html  frontend  reactjs  react-jsx 

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 ausprobiert. React / JSX-Namen dynamischer Komponenten Das gab mir einen Fehler beim …

165 javascript  reactjs  react-jsx 

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 durchaus sinnvoll ist map. Das ist …

145 javascript  jquery  reactjs  react-jsx 

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 mean className? Ich kann dies durch eine Änderung lösen classzu className. …

113 javascript  reactjs  react-jsx 

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 nichts behoben. Unten finden …

110 javascript  html  reactjs  react-jsx 

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() { describe('#indexOf()', function() { it('should return …

99 javascript  reactjs  npm  react-jsx 

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 um?

91 reactjs  sublimetext  react-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 </span> <span className="second-word-formatting">World!</span> </div> Fügen Sie sie in einer Zeile hinzu …

90 javascript  reactjs  react-jsx 

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(){ BannerDataStore.addChangeListener(this._onchange); document.addEventListener("click", this._handleDocumentClick, false); document.addEventListener("keyPress", this._handleEscKey, false); }, componentWillUnmount: function() { BannerDataStore.removeChangeListener(this._onchange); document.removeEventListener("click", this._handleDocumentClick, false); document.removeEventListener("keyPress", this._handleEscKey, false); }, Es wird jedoch nichts in der Konsole …

82 reactjs  react-jsx  react-bootstrap