Programowanie reactjs

7

Zdarzenia niestandardowe wreak.js do komunikacji z węzłami nadrzędnymi

Tworzę i nasłuchuję normalnych DOM CustomEventdo komunikacji z węzłami nadrzędnymi: U dziecka: var moveEvent = new CustomEvent('the-graph-group-move', { detail: { nodes: this.props.nodes, x: deltaX, y: deltaY }, bubbles: true }); this.getDOMNode().dispatchEvent(moveEvent); W rodzicu: componentDidMount: function () { this.getDOMNode().addEventListener("the-graph-group-move", this.moveGroup); }, To działa, ale czy istnieje sposób specyficzny dla React, który …

84 reactjs

6

Symuluj kliknięcie przycisku w Jest

Symulacja kliknięcia przycisku wydaje się bardzo łatwą / standardową operacją. Jednak nie mogę zmusić go do działania w testach Jest.js. Oto, co próbowałem (i robię to również przy użyciu jQuery), ale nie wydawało się, aby cokolwiek wyzwalało: import { mount } from 'enzyme'; page = <MyCoolPage />; pageMounted = mount(page); …

84 javascript reactjs testing jestjs enzyme

8

class vs className w React 16

Widziałem, że React 16 umożliwia przekazywanie atrybutów do DOM. Oznacza to, że zamiast nazwy klasy można użyć „class”, prawda? Zastanawiam się tylko, czy istnieją zalety dalszego używania className nad klasą, poza tym, że jest kompatybilny wstecz z poprzednimi wersjami React.

84 reactjs

10

Programy obsługi zdarzeń w komponentach bezstanowych React

Próbuję znaleźć optymalny sposób tworzenia programów obsługi zdarzeń w komponentach bezstanowych React. Mógłbym zrobić coś takiego: const myComponent = (props) => { const myHandler = (e) => props.dispatch(something()); return ( <button onClick={myHandler}>Click Me</button> ); } Wadą jest to, że za każdym razem, gdy ten komponent jest renderowany, tworzona jest nowa …

84 javascript reactjs

3

Jak korzystać ze zdarzenia onClick w komponencie React Link?

Używam komponentu Link z routera actjs i nie mogę uruchomić onClickevent. To jest kod: <Link to={this.props.myroute} onClick='hello()'>Here</Link> Czy to jest sposób, aby to zrobić, czy inny sposób?

84 reactjs react-router react-redux

5

Jak używać JQuery z ReactJS

Jestem nowy w ReactJS. Wcześniej używałem jQuery do ustawiania dowolnej animacji lub funkcji, których potrzebowałem. Ale teraz próbuję użyć ReactJS i zminimalizować użycie jQuery. Mój przypadek to: Próbuję zbudować akordeon z ReactJS. <div class="accor"> <div class="head">Head 1</div> <div class="body hide">Body 1</div> </div> <div class="accor"> <div class="head">Head 1</div> <div class="body hide">Body …

84 javascript jquery reactjs

4

okno nie zdefiniowano błędu podczas korzystania z extract-text-webpack-plugin React

Używam pakietu webpack do budowania moich komponentów reagowania i próbuję użyć extract-text-webpack-plugindo oddzielenia mojego css od mojego wygenerowanego pliku js. Jednak, gdy próbuję zbudować komponentu pojawia się następujący błąd: Module build failed: ReferenceError: window is not defined. Mój plik webpack.config.js wygląda następująco: var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); …

83 reactjs webpack

2

Reactjs asynchroniczne renderowanie komponentów

Chcę wyrenderować mój komponent po zakończeniu mojego żądania Ajax. Poniżej możesz zobaczyć mój kod var CategoriesSetup = React.createClass({ render: function(){ var rows = []; $.get('http://foobar.io/api/v1/listings/categories/').done(function (data) { $.each(data, function(index, element){ rows.push(<OptionRow obj={element} />); }); return (<Input type='select'>{rows}</Input>) }) } }); Ale otrzymuję poniższy błąd, ponieważ zwracam renderowanie w ramach gotowej …

83 javascript ajax asynchronous reactjs jquery-deferred

9

Jak uzyskać aktualną trasę w React-router 2.0.0-rc5

Mam router jak poniżej: <Router history={hashHistory}> <Route path="/" component={App}> <IndexRoute component={Index}/> <Route path="login" component={Login}/> </Route> </Router> Oto, co chcę osiągnąć: Przekieruj użytkownika do, /loginjeśli nie jest zalogowany Jeśli użytkownik próbował uzyskać dostęp, /logingdy jest już zalogowany, przekieruj go do roota/ więc teraz próbuję sprawdzić stan użytkownika w App„s componentDidMount, a …

83 javascript reactjs react-router

7

Jak ograniczyć dostęp do tras w React-routerze?

Czy ktoś wie, jak ograniczyć dostęp do określonych tras w routerze reagującym? Chcę sprawdzić, czy użytkownik jest zalogowany przed zezwoleniem na dostęp do określonej trasy. Myślałem, że to będzie proste, ale dokumentacja nie jest jasna, jak to zrobić. Czy jest to coś, co powinienem skonfigurować, gdzie definiuję moje <Route>komponenty, czy …

83 javascript reactjs react-router

12

React nie wyłącza autouzupełniania

Jak sprawić, by zareagował, wyrenderuj to? <input id={field.name} className="form-control" type="text" placeholder={field.name} autocomplete="off" {...field}/>

83 html reactjs google-chrome

3

Co to znaczy… odpocznij w React JSX

Patrząc na ten przykład React Router Dom v4 https://reacttraining.com/react-router/web/example/auth-workflow , widzę, że komponent PrivateRoute niszczy taką propozycję resztową const PrivateRoute = ({ component: Component, ...rest }) => ( <Route {...rest} render={props => ( fakeAuth.isAuthenticated ? ( <Component {...props}/> ) : ( <Redirect to={{ pathname: '/login', state: { from: props.location } …

83 reactjs react-router

8

Jak renderować elementy rodzeństwa bez zawijania ich w tagu nadrzędnym?

W większości przypadków posiadanie tagu nadrzędnego nie stanowi problemu. React.createClass({ render: function() { return ( <tbody> <tr><td>Item 1</td></tr> <tr><td>Item 2</td></tr> </tbody> ); } }); Ale są pewne przypadki, w których ma sens posiadanie elementów rodzeństwa w jednej funkcji renderującej bez rodzica, a zwłaszcza w przypadku tabeli, nie chcesz zawijać wiersza …

82 reactjs

5

Nie znaleziono modułu: „redux”

create-react-appStworzyłem nową aplikację React przy użyciu cli. Następnie dodałem 'react-redux'bibliotekę za pomocąnpm install --save react-redux . W package.jsonmam: "react-redux": "^4.4.5" Niestety aplikacja się nie kompiluje i narzeka na: 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 Nie mam pojęcia, co to znaczy? Oto kompletny pojemnik: import …

82 reactjs react-redux

4

W JSX, jak ustawić nazwę klasy jako ciąg znaków + {prop}

Jestem trochę nowy w React i próbuję ustawić className jako string + prop. Ale nie jestem pewien, jak to zrobić i czy jest to najlepsza praktyka. Więc to, co próbuję zrobić, a to oczywiście nie działa, to: <a data-featherlight='string' + {this.props.data.imageUrl}> Jak bym to napisał?

82 reactjs

Pytania otagowane jako reactjs