Programmierung reactjs

8

Wie kann ich mehrere Refs für ein Array von Elementen mit Hooks verwenden?

Soweit ich verstanden habe, kann ich refs für ein einzelnes Element wie dieses verwenden: const { useRef, useState, useEffect } = React; const App = () => { const elRef = useRef(); const [elWidth, setElWidth] = useState(); useEffect(() => { setElWidth(elRef.current.offsetWidth); }, []); return ( <div> <div ref={elRef} style={{ width: …

77 javascript reactjs react-hooks

2

So warten Sie auf bestimmte Eigenschaftsänderungen im Redux-Speicher, nachdem eine Aktion ausgelöst wurde

Ich versuche derzeit zu konzipieren, wie das Versenden einer Aktion in einer Komponente basierend auf einer Datenänderung nach einem Versenden in einer anderen Komponente behandelt wird. Nehmen Sie dieses Szenario: dispatch(someAjax) -> Eigenschaft in Statusaktualisierungen. Danach benötige ich eine weitere Komponente, die von derselben Eigenschaft abhängig ist, um zu wissen, …

76 reactjs redux redux-thunk

7

Bilder dynamisch hinzufügen Reagieren Sie auf Webpack

Ich habe versucht herauszufinden, wie Bilder über React und Webpack dynamisch hinzugefügt werden können. Ich habe einen Bildordner unter src / images und eine Komponente unter src / components / index . Ich verwende URL-Loader mit der folgenden Konfiguration für Webpack { test: /\.(png|jpg|)$/, loader: 'url-loader?limit=200000' } Innerhalb der Komponente, …

76 reactjs webpack image-loading urlloader

2

So synchronisieren Sie Redux-Status- und URL-Hash-Tag-Parameter

Wir haben eine Liste von Vorlesungen und Kapiteln, in denen der Benutzer sie auswählen und abwählen kann. Die beiden Listen werden in einem Redux-Speicher gespeichert. Jetzt möchten wir eine Darstellung ausgewählter Vorlesungs- und Kapitel-Slugs im Hash-Tag der URL behalten, und alle Änderungen an der URL sollten auch den Speicher ändern …

76 javascript reactjs react-router redux react-router-redux

2

Importieren Sie JavaScript-Datei- und Aufruffunktionen mit Webpack, ES6, ReactJS

Der Versuch, etwas zu tun, würde ich für sehr einfach halten. Ich möchte eine vorhandene JavaScript-Bibliothek importieren und dann deren Funktionen aufrufen. So möchte ich zum Beispiel blah.js importieren und dann blah () aufrufen. import React from 'react'; import {blah} from 'blah/js/blah.js'; class MyClass extends React.Component { constructor() { super(); …

76 reactjs ecmascript-6 webpack

3

Wie verwende ich den Randradius nur für eine Ecke (reaktionsnativ)?

Wie verwende ich den Randradius in React Native nur für eine Ecke? Ich habe ein modales Fenster Wie Sie sehen können, sind die unteren Ecken nicht abgerundet. Dies passiert, wenn ich backgroundColor für Schaltflächen verwendet habe. Ich habe versucht, den Überlauf für den Modal Wrapper zu verbergen, und es hat …

76 javascript reactjs react-native

2

PropTypes reagieren: objectOf vs shape?

Was ist der Unterschied zwischen PropTypes.objectOfund PropTypes.shape? In den Dokumenten : // An object with property values of a certain type optionalObjectOf: PropTypes.objectOf(PropTypes.number) vs. // An object taking on a particular shape optionalObjectWithShape: PropTypes.shape({ color: PropTypes.string, fontSize: PropTypes.number }) Wann soll ich verwenden objectOfund wann soll ich verwenden shape?

76 reactjs react-proptypes

3

Syntaxhervorhebung für Reaktionscode in sublime

Ich habe angefangen, einen grundlegenden React-Code in erhabenem Text zu schreiben. So sieht meine Syntaxhervorhebung aus. Es ist teilweise hervorgehoben. Gibt es ein vorgeschlagenes großartiges Plugin, mit dem ich ein vollständiges Syntax-Highlight sehen kann? import React, { Component } from 'react' import { connect } from 'react-redux' // <-- is …

76 javascript reactjs sublimetext3 syntax-highlighting

5

reagieren Material-ui, Woher weiß ich, dass ich die Schaltfläche onClick for verwenden kann?

Die Liste der Eigenschaften im Dokument enthält keine Informationen onClick ( http://www.material-ui.com/#/components/icon-button ). Woher weiß ich, dass ich onClick für den Klick-Handler verwenden muss?

76 reactjs material-ui

7

React-Redux: Aktionen müssen einfache Objekte sein. Verwenden Sie benutzerdefinierte Middleware für asynchrone Aktionen

Nicht behandelte Ablehnung (Fehler): Aktionen müssen einfache Objekte sein. Verwenden Sie benutzerdefinierte Middleware für asynchrone Aktionen. Ich wollte mit jedem Beitrag Kommentare hinzufügen. Wenn Abrufbeiträge ausgeführt werden, möchte ich die Abrufkommentar-API für alle Beiträge aufrufen. export function bindComments(postId) { return API.fetchComments(postId).then(comments => { return { type: BIND_COMMENTS, comments, postId } …

76 reactjs react-redux

7

Wie kann ich ein Cookie in Reaktion setzen?

Ursprünglich verwende ich den folgenden Ajax, um Cookies zu setzen. function setCookieAjax(){ $.ajax({ url: `${Web_Servlet}/setCookie`, contentType: 'application/x-www-form-urlencoded;charset=utf-8', headers: { 'Access-Control-Allow-Origin': '*', 'username': getCookie("username"), 'session': getCookie("session") }, type: 'GET', success: function(response){ setCookie("username", response.name, 30); setCookie("session", response.session, 30);} }) } function setCookie(cname, cvalue, minutes) { var d = new Date(); d.setTime(d.getTime() + …

76 reactjs cookies

6

Ein Objekt im Status einer React-Komponente speichern?

Ist es möglich, ein Objekt im Status einer React-Komponente zu speichern? Wenn ja, wie können wir dann den Wert eines Schlüssels in diesem Objekt mit ändern setState? Ich denke, es ist syntaktisch nicht erlaubt, so etwas zu schreiben wie: this.setState({ abc.xyz: 'new value' }); In ähnlicher Weise habe ich eine …

75 javascript reactjs

2

getState in Redux-Saga?

Ich habe ein Geschäft mit einer Liste von Artikeln. Wenn meine App zum ersten Mal geladen wird, muss ich die Elemente deserialisieren, wie beim Erstellen einiger speicherinterner Objekte basierend auf den Elementen. Die Artikel werden in meinem Redux-Shop gespeichert und von einem itemsReducer. Ich versuche, Redux-Saga als Nebeneffekt zu verwenden …

75 javascript reactjs redux redux-saga

2

React-js ignoriert das Attribut 'for' des Labels

Ich weiß, dass wir für 'class' className verwenden müssen, aber wie kann ich reagieren, um das Attribut 'for' beizubehalten? Folgende: <label for="recipient-name" className="control-label">Recipient:</label> wird gerendert als: <label class="control-label">Recipient:</label> In einem anderen Zusammenhang finde ich es ärgerlich, dass ich Attribute nicht über die Chrome-Konsole ändern kann, wenn ich React verwende. Gibt …

75 javascript reactjs

7

So importieren Sie ein Bild (.svg, .png) in eine Reaktionskomponente

Ich versuche, eine Bilddatei in eine meiner Reaktionskomponenten zu importieren. Ich habe das Projekt mit Web Pack eingerichtet Hier ist mein Code für die Komponente import Diamond from '../../assets/linux_logo.jpg'; export class ItemCols extends Component { render(){ return ( <div> <section className="one-fourth" id="html"> <img src={Diamond} /> </section> </div> ) } } …

75 javascript reactjs webpack

Als «reactjs» getaggte Fragen