Pytania oznaczone «jsx»

Próbuję znaleźć właściwy sposób zdefiniowania niektórych składników, które mogłyby być używane w ogólny sposób: <Parent> <Child value="1"> <Child value="2"> </Parent> Istnieje oczywiście logika renderowania między komponentami nadrzędnymi i podrzędnymi, co można sobie...

Mam zewnętrzny (do komponentu), obserwowalny obiekt, na którym chcę nasłuchiwać zmian. Gdy obiekt jest aktualizowany, emituje zdarzenia zmiany, a następnie chcę ponownie wysłać komponent po wykryciu jakiejkolwiek zmiany. W przypadku najwyższego poziomu React.renderbyło to możliwe, ale w...

Wiem, że możesz określić style w klasach React, takie jak to: var MyDiv = React.createClass({ render: function() { var style = { color: 'white', fontSize: 200 }; return <div style={style}> Have a good and productive day! </div>; } }); Czy powinienem dążyć do stylizacji w ten...

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) {...

Biorąc pod uwagę prosty komponent, który renderuje jego dzieci: class ContainerComponent extends Component { static propTypes = { children: PropTypes.object.isRequired, } render() { return ( <div> {this.props.children} </div> ); } } export default

Mam stosunkowo prosty problem z dodaniem wbudowanego skryptu do komponentu React. Co mam do tej pory: 'use strict'; import '../../styles/pages/people.scss'; import React, { Component } from 'react'; import DocumentTitle from 'react-document-title'; import { prefix } from

Jak opcjonalnie dołączyć element do JSX? Oto przykład użycia banera, który powinien znajdować się w elemencie, jeśli został przekazany. Chcę uniknąć duplikowania tagów HTML w instrukcji if. render: function () { var banner; if (this.state.banner) { banner = <div...

Jest coś, co wydaje mi się bardzo mylące podczas pracy React. Istnieje wiele przykładów dostępnych w Internecie, które wykorzystują .jspliki z reakcją, ale wiele innych używa .jsxplików. Przeczytałem o .jsxplikach i rozumiem, że pozwalają one po prostu pisać tagi HTML w twoim pliku javascript....

Tworzę coś z React, gdzie muszę wstawić HTML z React Variables w JSX. Czy istnieje sposób na taką zmienną: var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>'; i wstawić go w taki sposób, żeby działał? render: function() { return ( <div...

W oficjalnych dokumentach React wspomina: Jeśli znasz metody cyklu życia klasy React, możesz pomyśleć o hooku useEffect jako połączeniu componentDidMount, componentDidUpdate i componentWillUnmount. Moje pytanie brzmi - jak możemy wykorzystać componentWillMount()metodę cyklu życia w...

Staram się dynamicznie renderować komponenty na podstawie ich typu. Na przykład: var type = "Example"; var ComponentName = type + "Component"; return <ComponentName />; // Returns <examplecomponent /> instead of <ExampleComponent /> Wypróbowałem rozwiązanie zaproponowane tutaj...

Próbuję napisać komponent React. dla tagów nagłówków html (h1, h2, h3, itd.), gdzie priorytet nagłówka zmienia się dynamicznie w zależności od priorytetu, który zdefiniowaliśmy we właściwościach. Oto co próbuję zrobić. <h{this.props.priority}>Hello</h{this.props.priority}> oczekiwany...

Oto, czego próbowałem i jak idzie źle. To działa: <div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} /> To nie: <div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /> Właściwość description jest zwykłym ciągiem zawartości HTML. Jednak...

Próbuję przekonwertować składnik jQuery do React.js i jedną z rzeczy, z którymi mam problem, jest renderowanie n liczby elementów w oparciu o pętlę for. Rozumiem, że nie jest to możliwe lub zalecane, a jeśli w modelu istnieje tablica, jej użycie ma sens map. W porządku, ale co, jeśli nie masz...

Ciekawe, jaki jest właściwy sposób podejścia do tego: var Hello = React.createClass({ getInitialState: function() { return {total: 0, input1:0, input2:0}; }, render: function() { return ( <div>{this.state.total}<br/> <input type="text" value={this.state.input1}...

Mam bardzo prosty element funkcjonalny, jak następuje: import * as React from 'react'; export interface AuxProps { children: React.ReactNode } const aux = (props: AuxProps) => props.children; export default aux; I kolejny komponent: import * as React from "react"; export interface...

Właśnie zacząłem poznawać Reacta, dodając komponent z prostą funkcją renderującą: render() { return <div class="myApp"></div> } Po uruchomieniu aplikacji pojawia się następujący błąd: Warning: Unknown DOM property class. Did you mean className? Mogę to rozwiązać, zmieniając class...

Próbuję zacząć budować witrynę w ReactJS. Jednak kiedy próbowałem umieścić mój JS w oddzielnym pliku, zacząłem otrzymywać ten błąd: „Uncaught SyntaxError: Uknown token <”. Próbowałem dodać /** @jsx React.DOM */na początku pliku JS, ale to niczego nie naprawiło. Poniżej znajdują się pliki HTML i...

Używam programu Lint z moją aplikacją React i otrzymuję ten błąd: error JSX props should not use arrow functions react/jsx-no-bind I tutaj uruchamiam funkcję strzałki (wewnątrz onClick): {this.state.photos.map(tile => ( <span key={tile.img}> <Checkbox

Mam plik test_stuff.js, z którym pracuję npm test Wygląda to mniej więcej tak: import { assert } from 'assert'; import { MyProvider } from '../src/index'; import { React } from 'react'; const myProvider = ( <MyProvider> </MyProvider> ); describe('Array', function() {...