Programmierung reactjs

10

Ereignishandler in React Stateless Components

Der Versuch, einen optimalen Weg zum Erstellen von Ereignishandlern in reaktionslosen Komponenten von React zu finden. Ich könnte so etwas machen: const myComponent = (props) => { const myHandler = (e) => props.dispatch(something()); return ( <button onClick={myHandler}>Click Me</button> ); } Der Nachteil hierbei ist, dass jedes Mal, wenn diese Komponente …

82 javascript reactjs

6

Hören Sie den Tastendruck für das Dokument in Reaktion

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

1

Wo ist die Verbindung zwischen index.html und index.js in einer Create-React-App-Anwendung?

Ich fange an, mit der Create React App zu spielen, kann aber nicht verstehen, wie die App index.jsgeladen wird index.html. Dies ist der HTML-Code: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> <!-- Notice the use of %PUBLIC_URL% in the tag above. It …

82 javascript html reactjs create-react-app

3

Wie verwende ich das onClick-Ereignis für die React Link-Komponente?

Ich verwende die Link-Komponente vom ReactJS-Router und kann das onClickevent nicht zum Laufen bringen. Dies ist der Code: <Link to={this.props.myroute} onClick='hello()'>Here</Link> Ist das der Weg oder ein anderer Weg?

82 reactjs react-router react-redux

11

React macht die automatische Vervollständigung nicht deaktiviert

Wie kann ich reagieren lassen, um es zu rendern? <input id={field.name} className="form-control" type="text" placeholder={field.name} autocomplete="off" {...field}/>

82 html reactjs google-chrome

8

Wie rendere ich Geschwisterelemente, ohne sie in ein übergeordnetes Tag einzuschließen?

In den meisten Fällen ist ein übergeordnetes Tag kein Problem. React.createClass({ render: function() { return ( <tbody> <tr><td>Item 1</td></tr> <tr><td>Item 2</td></tr> </tbody> ); } }); In einigen Fällen ist es jedoch sinnvoll, Geschwisterelemente in einer Renderfunktion ohne übergeordnetes Element zu haben, und insbesondere im Fall einer Tabelle möchten Sie keine …

81 reactjs

5

Wie kann ich sich wiederholende React-Elemente rendern?

Ich habe Code geschrieben, um sich wiederholende Elemente in ReactJS zu rendern, aber ich hasse es, wie hässlich es ist. render: function(){ var titles = this.props.titles.map(function(title) { return <th>{title}</th>; }); var rows = this.props.rows.map(function(row) { var cells = []; for (var i in row) { cells.push(<td>{row[i]}</td>); } return <tr>{cells}</tr>; }); …

81 javascript reactjs

6

Reagieren Sie auf Zeilenumbrüche im gespeicherten Textbereich

Facebook nutzen React. Auf einer Einstellungsseite habe ich eine mehrzeilige Seite, textareain die ein Benutzer mehrzeiligen Text eingeben kann (in meinem Fall eine Adresse). <textarea value={address} /> Wenn ich versuche, die Adresse anzuzeigen, werden {address}die Zeilenumbrüche nicht angezeigt und befinden sich alle in einer Zeile. <p>{address}</p> Irgendwelche Ideen, wie man …

81 javascript reactjs textarea

6

Reagieren: Inline-Bedingung bedingt an Komponente übergeben

Ich würde gerne wissen, ob es einen besseren Weg gibt, eine Requisite bedingt zu übergeben, als eine if-Anweisung zu verwenden. Zum Beispiel habe ich gerade: var parent = React.createClass({ propTypes: { editable: React.PropTypes.bool.isRequired, editableOpts: React.PropTypes.shape({...}) }, render: function() { if(this.props.editable) { return ( <Child editable={this.props.editableOpts} /> ); } else { …

81 javascript reactjs inline

3

Lokale package.json existiert, aber node_modules fehlen

Ich versuche, eine Redux-Anwendung zu starten, die ich gerade aus einem GitHub-Repository geklont habe. Ich habe versucht, es mit dem folgenden Befehl auszuführen npm start Ich erhalte diesen Fehler > react-redux@1.0.0 start /home/workspace/assignment > webpack-dev-server --config ./configs/webpack/webpack.config.development.js sh: 1: webpack-dev-server: not found npm ERR! file sh npm ERR! code ELIFECYCLE …

81 javascript reactjs npm redux react-redux

21

Reagieren Router ändert URL, aber nicht anzeigen

Ich habe Probleme, die Ansicht zu ändern, wenn ich auf das Routing reagiere. Ich möchte nur eine Liste der Benutzer anzeigen, und durch Klicken auf jeden Benutzer sollte zu einer Detailseite navigiert werden. Hier ist der Router: import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter } from …

81 reactjs react-router

2

Webpack / Babel / React Build-Fehler: "Unbekannte Option: foo / node_modules / react / react.js.Children"

Ich versuche ein Projekt mit Webpack zu erstellen und mit dieser Webpack-Konfiguration zu reagieren: var path = require('path'); var webpack = require('webpack'); module.exports = { entry: [ 'babel-polyfill', './app/less/main.less', './app/main.js', 'webpack-dev-server/client?http://localhost:8080' ], output: { publicPath: '/', filename: 'dist/main.js' }, debug: true, devtool: 'source-map', module: { loaders: [ { test: /\.js$/, …

80 reactjs webpack babeljs

5

Modul nicht gefunden: 'redux'

Ich habe mit create-react-appcli eine neue Reaktionsanwendung erstellt . Dann habe ich die 'react-redux'Bibliothek mit hinzugefügt npm install --save react-redux. In habe package.jsonich: "react-redux": "^4.4.5" Leider wird die App nicht kompiliert und beschwert sich bei: Error in ./~/react-redux/lib/utils/wrapActionCreators.js Module not found: 'redux' in C:\Users\Salman\Desktop\Courses\Internship\React\Youtube-Front-End\node_modules\react-redux\lib\utils @ ./~/react-redux/lib/utils/wrapActionCreators.js 6:13-29 Ich habe keine …

80 reactjs react-redux

4

Wie setze ich in JSX einen Klassennamen als Zeichenfolge + {prop}?

Ich bin ein bisschen neu in React und versuche, einen Klassennamen als String + Prop festzulegen. Aber ich bin mir nicht sicher, wie ich es machen soll und ob das die beste Vorgehensweise ist. Ich versuche also Folgendes zu tun, und es funktioniert offensichtlich nicht: <a data-featherlight='string' + {this.props.data.imageUrl}> Wie …

80 reactjs

3

Was bedeutet das? In React JSX ruhen

Wenn ich mir dieses Beispiel für React Router Dom v4 ansehe, https://reacttraining.com/react-router/web/example/auth-workflow , sehe ich, dass die PrivateRoute- Komponente eine Rest-Requisite wie diese zerstört const PrivateRoute = ({ component: Component, ...rest }) => ( <Route {...rest} render={props => ( fakeAuth.isAuthenticated ? ( <Component {...props}/> ) : ( <Redirect to={{ pathname: …

80 reactjs react-router

Als «reactjs» getaggte Fragen