Pytania otagowane jako reactjs

React (znany również jako React.js lub ReactJS) to biblioteka JavaScript opracowana przez Facebooka w celu tworzenia interfejsów użytkownika. Wykorzystuje deklaratywny paradygmat oparty na komponentach, a jego celem jest zarówno wydajność, jak i elastyczność.

8
Jak uzyskać pierwszą N liczbę elementów z tablicy
Pracuję z Javascript (ES6) / FaceBook reaguję i próbuję uzyskać pierwsze 3 elementy tablicy o różnej wielkości. Chciałbym zrobić odpowiednik Linq weź (n). W moim pliku Jsx mam następujące elementy: var items = list.map(i => { return ( <myview item={i} key={i.id} /> ); }); Następnie, aby zdobyć pierwsze 3 przedmioty, …
5
Dlaczego mówi się, że koncepcja wirtualnego DOM Reacta jest bardziej wydajna niż sprawdzanie brudnych modeli?
Widziałem przemówienie dewelopera React na ( Pete Hunt: React: Rethinking najlepsze praktyki - JSConf EU 2013 ) i mówca wspomniał, że brudne sprawdzanie modelu może być powolne. Ale czy obliczanie różnicy między wirtualnymi DOMami nie jest nawet mniej wydajne, ponieważ wirtualna DOM, w większości przypadków, powinna być większa niż model? …
15
Reagować kod „po renderowaniu”?
Mam aplikację, w której muszę dynamicznie ustawiać wysokość elementu (powiedzmy „zawartość aplikacji”). Bierze wysokość „chrome” aplikacji i odejmuje ją, a następnie ustawia wysokość „zawartości aplikacji”, aby zmieściła się w 100% w obrębie tych ograniczeń. Jest to bardzo proste w przypadku waniliowych widoków JS, jQuery lub Backbone, ale staram się dowiedzieć, …
21
Jak przejść do historii w React Router v4?
W bieżącej wersji React Router (v3) mogę zaakceptować odpowiedź serwera i użyć, browserHistory.pushaby przejść do odpowiedniej strony odpowiedzi. Nie jest to jednak dostępne w wersji 4 i nie jestem pewien, jaki jest właściwy sposób obsługi tego. W tym przykładzie przy użyciu Redux wywołanie składników / app-product-form.jsthis.props.addProduct(props) po przesłaniu formularza przez …
14
React - zmiana niekontrolowanego wejścia
Mam prosty element reagujący z formularzem, który moim zdaniem ma jedno kontrolowane wejście: import React from 'react'; export default class MyForm extends React.Component { constructor(props) { super(props); this.state = {} } render() { return ( <form className="add-support-staff-form"> <input name="name" type="text" value={this.state.name} onChange={this.onFieldChange('name').bind(this)}/> </form> ) } onFieldChange(fieldName) { return function (event) …
6
Co to jest mapDispatchToProps?
Czytałem dokumentację biblioteki Redux i ma ona ten przykład: Oprócz odczytu stanu komponenty kontenera mogą wywoływać akcje. W podobny sposób można zdefiniować funkcję o nazwie, mapDispatchToProps()która odbiera dispatch()metodę i zwraca rekwizyty wywołania zwrotnego, które chcesz wstrzyknąć do komponentu prezentacji. To właściwie nie ma sensu. Dlaczego potrzebujesz, mapDispatchToPropsskoro już masz mapStateToProps? …
14
Jak zaktualizować stan rodzica w React?
Moja struktura wygląda następująco: Component 1 - |- Component 2 - - |- Component 4 - - - |- Component 5 Component 3 Komponent 3 powinien wyświetlać niektóre dane w zależności od stanu komponentu 5. Ponieważ rekwizyty są niezmienne, nie mogę po prostu zapisać jego stanu w komponencie 1 i …
27
Jak dodać wiele klas do ReactJS Component
Jestem nowy w ReactJS i JSX i mam mały problem z poniższym kodem. Próbuję dodać wiele klas do classNameatrybutu na każdym li: <li key={index} className={activeClass, data.class, "main-class"}></li> Mój komponent React to: var AccountMainMenu = React.createClass({ getInitialState: function() { return { focused: 0 }; }, clicked: function(index) { this.setState({ focused: index …
30
Niezmienne naruszenie: Przedmioty nie są ważne jako dziecko React
W funkcji renderowania mojego komponentu mam: render() { const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => { return (<li onClick={this.onItemClick.bind(this, item)} key={item}>{item}</li>); }); return ( <div> ... <ul> {items} </ul> ... </div> ); } wszystko renderuje się dobrze, jednak po kliknięciu <li>elementu pojawia się następujący błąd: Nieprzechwycony błąd: Niezmienne …
16
Nawiguj programowo, używając routera reagującego V4
Właśnie wymieniłem react-routerz v3 na v4. Ale nie jestem pewien, jak programowo nawigować w funkcji członka Component. tzn. w handleClick()funkcji chcę nawigować /path/some/wherepo przetworzeniu niektórych danych. Robiłem to przez: import { browserHistory } from 'react-router' browserHistory.push('/path/some/where') Ale nie mogę znaleźć takich interfejsów w wersji 4. Jak nawigować za pomocą v4?
7
Błąd: Node Sass w wersji 5.0.0 jest niezgodny z ^ 4.0.0
Utworzyłem pusty projekt React, używając polecenia: npx create-react-appna npm v7.0.7 i Node v15.0.1 Zainstalowano: React v17.0.1, node-sass v5.0.0, Następnie próbowałem zaimportować pusty plik .scss do komponentu aplikacji: App.js import './App.scss' function App() { return ( <div className="App"> App </div> ); } export default App; Zgłoś błąd: Failed to compile. ./src/App.scss …
19
Reaguj J warunkowo stosując atrybuty klasy
Chcę warunkowo wyświetlić i ukryć tę grupę przycisków w zależności od tego, co jest przekazywane z komponentu nadrzędnego, który wygląda następująco: <TopicNav showBulkActions={this.__hasMultipleSelected} /> … __hasMultipleSelected: function() { return false; //return true or false depending on data } … var TopicNav = React.createClass({ render: function() { return ( <div className="row"> …
12
Komponent zmienia niekontrolowane wprowadzanie tekstu tekstowego w celu kontrolowania błędu w ReactJS
Ostrzeżenie: składnik zmienia niekontrolowane wprowadzanie tekstu tekstowego, który ma być kontrolowany. Elementy wejściowe nie powinny przełączać się z niekontrolowanego na kontrolowane (lub odwrotnie). Wybierz między użyciem kontrolowanego lub niekontrolowanego elementu wejściowego przez cały okres użytkowania komponentu. * Oto mój kod: constructor(props) { super(props); this.state = { fields: {}, errors: {} …
6
Dlaczego wywoływanie metody reagowania setState nie powoduje natychmiastowej mutacji stanu?
Czytam sekcję FormularzeReagujedokumentacja i właśnie wypróbowałem ten kod, aby zademonstrować onChangeużycie ( 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 type="text" value={this.state.value} onChange={this.handleChange}/> ); } }); …
11
ReactJS Komunikacja dwóch komponentów
Właśnie zacząłem pracę z ReactJS i trochę utknąłem w moim problemie. Moja aplikacja to zasadniczo lista z filtrami i przycisk do zmiany układu. W tej chwili używam trzy składniki: <list />, < Filters />a <TopBar />teraz oczywiście przy zmianie ustawień < Filters />Chcę wywołać jakąś metodę w <list />celu zaktualizowania …
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.