Programmierung reactjs

11

Die Komponente wird nicht erneut bereitgestellt, wenn sich die Routenparameter ändern

Ich arbeite an einer React-Anwendung mit React-Router. Ich habe eine Projektseite mit einer URL wie folgt: myapplication.com/project/unique-project-id Wenn die Projektkomponente geladen wird, löse ich eine Datenanforderung für dieses Projekt aus dem Ereignis componentDidMount aus. Ich stoße jetzt auf ein Problem, bei dem sich nur die ID so ändert, wenn ich …

97 reactjs react-router

9

Machen Sie die Ansicht 80% Breite des übergeordneten Elements in React Native

Ich erstelle ein Formular in React Native und möchte, dass mein TextInputs 80% der Bildschirmbreite ausmacht. Mit HTML und normalem CSS wäre dies unkompliziert: input { display: block; width: 80%; margin: auto; } Außer dass React Native die displayEigenschaft, die prozentualen Breiten oder die automatischen Ränder nicht unterstützt . Was …

97 javascript css reactjs react-native

4

Warum wird mein onClick beim Rendern aufgerufen? - React.js

Ich habe eine Komponente, die ich erstellt habe: class Create extends Component { constructor(props) { super(props); } render() { var playlistDOM = this.renderPlaylists(this.props.playlists); return ( <div> {playlistDOM} </div> ) } activatePlaylist(playlistId) { debugger; } renderPlaylists(playlists) { return playlists.map(playlist => { return <div key={playlist.playlist_id} onClick={this.activatePlaylist(playlist.playlist_id)}>{playlist.playlist_name}</div> }); } } function mapStateToProps(state) { …

97 javascript reactjs redux

16

Warnung: Jedes Kind in einem Array oder Iterator sollte eine eindeutige Schlüsselstütze haben. Überprüfen Sie die Rendermethode von "ListView"

Ich habe eine App mit ReactNative sowohl für iOS als auch für Android mit einem erstellt ListView. Wenn Sie die Listenansicht mit einer gültigen Datenquelle füllen, wird am unteren Bildschirmrand die folgende Warnung angezeigt: Warnung: Jedes Kind in einem Array oder Iterator sollte eine eindeutige "Schlüssel" -Stütze haben. Überprüfen Sie …

97 facebook listview reactjs react-native

4

setState vs replaceState in React.js

Ich bin neu in der React.js-Bibliothek und habe einige der Tutorials durchgesehen und bin auf Folgendes gestoßen: this.setState this.replaceState Die Beschreibung ist nicht sehr klar (IMO). setState is done to 'set' the state of a value, even if its already set in the 'getInitialState' function. Ähnlich, The replaceState() method is …

96 javascript frontend reactjs

5

Importieren Sie Bilder mithilfe von Webpack dynamisch aus einem Verzeichnis

Hier ist mein aktueller Workflow zum Importieren von Bildern und Symbolen in Webpack über ES6: import cat from './images/cat1.jpg' import cat2 from './images/cat2.svg' import doggy from './images/doggy.png' import turtle from './images/turtle.png' <img src={doggy} /> Das wird schnell chaotisch. Folgendes möchte ich: import * from './images' <img src={doggy} /> <img src={turtle} …

96 reactjs webpack ecmascript-6

1

Reagieren Sie in JSX

Ich habe ein Objekt, das ich über REACT ausgeben möchte question = { text: "Is this a good question?", answers: [ "Yes", "No", "I don't know" ] } und meine Reaktionskomponente (abgeschnitten) ist eine andere Komponente class QuestionSet extends Component { render(){ <div className="container"> <h1>{this.props.question.text}</h1> {this.props.question.answers.forEach(answer => { console.log("Entered"); //This …

96 reactjs react-props

5

OnClick reagieren - Ereignis mit Parameter übergeben

Ohne Parameter function clickMe(e){ //e is the event } <button onClick={this.clickMe}></button> Mit Parameter function clickMe(parameter){ //how to get the "e" ? } <button onClick={() => this.clickMe(someparameter)}></button> Ich möchte das bekommen event. Wie kann ich es bekommen?

96 javascript reactjs events dom-events

5

Pretty Printing JSON mit React

Ich verwende ReactJS und ein Teil meiner App erfordert hübsch gedrucktes JSON. Ich bekomme JSON wie: { "foo": 1, "bar": 2 }und wenn ich das JSON.stringify(obj, null, 4)in der Browserkonsole durchlaufe , wird es ziemlich gedruckt, aber wenn ich es in diesem Reaktionsschnipsel verwende: render: function() { var json = …

96 javascript json reactjs flux

11

Wie verwende ich Google-Schriftarten in React.js?

Ich hatte eine Website mit React.js und Webpack erstellt . Ich möchte Google-Schriftarten auf der Webseite verwenden, daher habe ich den Link in den Abschnitt eingefügt. Google Fonts <link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"> Und CSS einstellen body{ font-family: 'Bungee Inline', cursive; } Es funktioniert jedoch nicht. Wie kann ich dieses Problem lösen?

95 reactjs webpack google-font-api

2

Wann sollten Sie Render und Flach in Enzym- / Reaktionstests verwenden?

Bevor ich diese Frage gestellt habe, habe ich versucht, in sqa stackexchange zu suchen, aber ich habe dort keinen Beitrag über flach und rendern gefunden, also hoffe ich, dass mir hier jemand helfen kann. Wann sollte ich beim Testen flache und rendernde Reaktionskomponenten verwenden? Basierend auf den Airbnb-Dokumenten habe ich …

95 testing meteor reactjs chai enzyme

5

Was ist der Unterschied zwischen JavaScript-Versprechen und asynchronem Warten?

Ich habe bereits ECMAScript 6- und ECMAScript 7-Funktionen (dank Babel) in meinen Anwendungen verwendet - sowohl für Mobilgeräte als auch für das Internet. Der erste Schritt war offensichtlich die ECMAScript 6-Ebene. Ich habe viele asynchrone Muster gelernt, die Versprechen (die wirklich vielversprechend sind), Generatoren (nicht sicher, warum das * -Symbol) …

95 javascript asynchronous reactjs async-await promise

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:&nbsp;&nbsp; <select> <option></option> </select> <button type="button">Get Pricing Report</button> <br/> Select Takeout Scenario:&nbsp; <select> <option></option> </select> …

95 html reactjs jsx

14

Wie schwebst du in ReactJS? - onMouseLeave beim schnellen Überfahren nicht registriert

Wie können Sie in InctJS entweder ein Schwebeereignis oder ein aktives Ereignis erzielen, wenn Sie Inline-Styling durchführen? Ich habe festgestellt, dass der Ansatz onMouseEnter, onMouseLeave fehlerhaft ist, und hoffe, dass es einen anderen Weg gibt, dies zu tun. Insbesondere wenn Sie sehr schnell mit der Maus über eine Komponente fahren, …

95 javascript css reactjs mouseevent dom-events

8

Status wird nicht aktualisiert, wenn der React-Status-Hook in setInterval verwendet wird

Ich probiere die neuen React Hooks aus und habe eine Clock-Komponente mit einem Zähler, der sich jede Sekunde erhöhen soll. Der Wert steigt jedoch nicht über eins an. function Clock() { const [time, setTime] = React.useState(0); React.useEffect(() => { const timer = window.setInterval(() => { setTime(time + 1); }, 1000); …

95 javascript reactjs react-hooks

Als «reactjs» getaggte Fragen