Powiedz, że mam prosty przełącznik: Kiedy klikam przycisk, składnik Kolor zmienia się z czerwonego na niebieski Mogę osiągnąć ten wynik, robiąc coś takiego. index.js Button: onClick={()=>{dispatch(changeColor())}} Color: this.props.color ? blue :
W zwykłym starym javascript mam DIV <div class="movie" id="my_movie"> i poniższy kod javascript var myMovie = document.getElementById('my_movie'); myMovie.addEventListener('nv-enter', function (event) { console.log('change scope'); }); Teraz mam komponent React, wewnątrz tego...
Chcę zaimportować plik CSS do komponentu reagowania. Próbowałem, import disabledLink from "../../../public/styles/disabledLink";ale pojawia się poniższy błąd; Nie znaleziono modułu: Błąd: nie można znaleźć „pliku” lub „katalogu” ../../../public/styles/disabledLink w c: \ Users \ User \...
Próbuję rozwiązać problem z następującą składnią: export const sendVerificationEmail = async () => (dispatch) => { try { dispatch({ type: EMAIL_FETCHING, payload: true }); await Auth.sendEmailVerification(); dispatch({ type: EMAIL_FETCHING, payload: false })) } catch (error) {...
Oto liczby min + gzip 26k gzip 90k oryginał 450 + k React nie ma wielu funkcji w swojej dokumentacji. Dlaczego jest taki duży? Mam wrażenie, że jest to implementacja lekkiego DOM. Ale chcę być pewien.
Mam kilka właściwości, które mają ciąg znaków, który może zawierać znaki, takie jak &. Zawiera również spacje. Chcę zamienić wszystkie spacje na . Czy mogę to zrobić w łatwy sposób? Pamiętaj, że nie mogę po prostu renderować przy użyciu tej składni: <div...
Używam Reacti ESLintz eslint-plugin-react. Chcę disablez prop-typesreguły w jednym pliku. var React = require('react'); var Model = require('./ComponentModel'); var Component = React.createClass({ /* eslint-disable react/prop-types */ propTypes: Model.propTypes, /* eslint-enable...
Mam testy jednostkowe dla mojego reducers. Jednak kiedy debuguję w przeglądarce, chcę sprawdzić, czy moje akcje zostały poprawnie wywołane i czy stan został odpowiednio zmodyfikowany. Szukam czegoś takiego: window._redux.store ... w przeglądarce, więc mogę to wpisać na konsoli i sprawdzić,...
Mam projekt, którego nie dotykałem przez 2 tygodnie. Cofam to i teraz, gdy próbuję uruchomić, pojawia npm startsię ten błąd. > react-scripts start sh: react-scripts: command not found npm ERR! Darwin 16.0.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start" npm ERR! node...
Testowałem moją aplikację React.js w przeglądarce Internet Explorer i stwierdziłem, że jakiś kod ES6 / 7 Array.prototype.includes()ją psuje. Używam aplikacji create-react- i najwyraźniej zdecydowali się nie uwzględniać wielu polyfillów, ponieważ nie wszyscy ich potrzebują i spowalniają czas...
Implementuję przykład z https://github.com/moroshko/react-autosuggest Ważny kod wygląda tak: import React, { Component } from 'react'; import suburbs from 'json!../suburbs.json'; function getSuggestions(input, callback) { const suggestions = suburbs .filter(suburbObj =>...
Mam reactjsaplikację napisaną przy użyciu standardów ES6 i używam webpackdo jej tworzenia. Te webpackładunki z jsmodułów używających babel-loader. Mówiąc konkretnie, używam następujących wersji pakietów: ├── [email protected] ├── [email protected] ├── [email protected] └──...
Załóżmy, że mam ciąg tekstowy zawierający znaki końca wiersza i renderuję go w następujący sposób: render() { var text = "One\nTwo\nThree"; return <div>{text}</div>; } W HTML znaki końca linii nie są renderowane jako znaki końca linii. Jak mam to zrobić w React? Nie chcę...
Renderuję link z React: render: -> `<a className="upvotes" onClick={this.upvote}>upvote</a>` Następnie powyżej mam funkcję upvote: upvote: -> // do stuff (ajax) Przed linkiem miałem w tym miejscu, ale muszę przełączyć się na link i tu jest problem - za każdym razem, gdy...
Mam następny kod, rzut eslint: reaguj / prop-types onClickOut; brakuje podczas sprawdzania poprawności rekwizytów dzieci reagujące / typu prop; brakuje podczas sprawdzania poprawności rekwizytów propTypes został zdefiniowany, ale eslint go nie rozpoznaje. import React, { Component, PropTypes }...
Jaki jest najlepszy sposób obsługi zawisów w stylizowanych komponentach. Mam element zawijający, który po najechaniu kursorem ujawni przycisk. Mógłbym zaimplementować stan komponentu i przełączyć właściwość po najechaniu kursorem, ale zastanawiałem się, czy istnieje lepszy sposób na zrobienie...
Mam problem ze zmianą widoku w odpowiedzi na routing. Chcę tylko pokazać listę użytkowników, a kliknięcie każdego użytkownika powinno prowadzić do strony szczegółów. Oto router: import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter } from 'react-router-dom'; import...
Muszę zaimplementować logikę biznesową w zależności od historii przeglądania. To, co chcę zrobić, to coś takiego: reactRouter.onUrlChange(url => { this.history.push(url); }); Czy istnieje sposób na otrzymanie oddzwaniania z routera reaktywnego po zaktualizowaniu adresu URL?...
Mam plik karuzeli, w którym chcę pobrać index.jsi zbudować block.build.js, więc moje webpack.config.jsjest: var config = { entry: './index.js', output: { path: __dirname, filename: 'block.build.js', }, devServer: { contentBase: './Carousel' }, module : { rules : [ { test: /.js$/,...
Podczas programowania za pomocą aplikacji create-react-app moja przeglądarka wchodzi w tryb debugera po ostrzeżeniach: Łamie kod źródłowy react-dev-tools: // --- Welcome to debugging with React DevTools --- // This debugger statement means that you've enabled the "break on warnings" feature....