Programowanie jsx

7

ReactJs: Jakie powinny być PropTypes dla this.props.children?

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 ContainerComponent; Pytanie: Jaki powinien być typ prop dla dzieci? Gdy ustawię go jako obiekt, nie powiedzie się, …

265 reactjs jsx react-proptypes

6

ReactJS - .JS vs .JSX

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. Ale to samo można również zapisać …

211 reactjs jsx

13

Jak używać componentWillMount () w React hookach?

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 hooku?

175 javascript reactjs jsx react-hooks

5

Dynamiczna nazwa tagu w jsx i React

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 wynik: <h1>Hello</h1> To nie działa. Czy jest na to jakikolwiek sposób?

162 reactjs jsx

11

Renderuj ciąg HTML jako prawdziwy HTML w komponencie React

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 z jakiegoś powodu jest renderowany jako ciąg znaków, a nie jako HTML. Jakieś sugestie?

159 javascript html reactjs jsx

11

React.js: identyfikowanie różnych danych wejściowych za pomocą jednej procedury obsługi onChange

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} onChange={this.handleChange} /> <input type="text" value={this.state.input2} onChange={this.handleChange} /> </div> ); }, handleChange: function(e){ this.setState({ ??? : e.target.value}); t = this.state.input1 + …

142 javascript reactjs jsx

12

TypeScript i React - dzieci piszą?

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 LayoutProps { children: React.ReactNode } const layout = (props: …

138 reactjs typescript jsx typescript2.0

6

Dlaczego rekwizyty JSX nie powinny używać funkcji strzałek ani bindować?

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 defaultChecked={tile.checked} onCheck={() => this.selectPicture(tile)} style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}} /> <GridTile …

105 javascript reactjs ecmascript-6 jsx arrow-functions

6

& nbsp jsx nie działa

Używam tagu & nbsp w jsx i nie renderuje spacji. Poniżej znajduje się mały fragment mojego kodu, proszę o pomoc. var Reporting=React.createClass({ render: function(){ return( <div style={divPositionReporting}> <p>Pricing Reports</p> <hr></hr> Select Scenario:&nbsp;&nbsp; <select> <option></option> </select> <button type="button">Get Pricing Report</button> <br/> Select Takeout Scenario:&nbsp; <select> <option></option> </select> <button type="button">Get Pricing Report</button> …

101 html reactjs jsx

3

Dlaczego „MouseEvent” w programie obsługi zdarzeń pola wyboru nie jest ogólne?

Mam element checkbox TSX (JSX): <input type="checkbox" name={i.toString()} onClick={this.handleCheckboxClick} /> Z pomocą kodu VS wiem, że typ parametru wejściowego this.handleCheckboxClickto MouseEvent<HTMLInputElement>. Więc zaimplementowałem to z: private handleCheckboxClick(event: MouseEvent<HTMLInputElement>) { ... } Następnie [ts] Type 'MouseEvent' is not generic.pojawia się błąd mówiący, jak pokazano na poniższym obrazku: Wersja moich pakietów: "@types/react": …

92 reactjs typescript events types jsx

2

Typescript + React / Redux: Właściwość „XXX” nie istnieje w typie „IntrinsicAttributes & IntrinsicClassAttributes”

Pracuję nad projektem z Typescript, React i Redux (wszystkie działające w Electron) i napotykam problem, gdy włączam jeden komponent oparty na klasie do drugiego i próbuję przekazać parametry między nimi. Mówiąc luźniej, mam następującą strukturę komponentu kontenera: class ContainerComponent extends React.Component<any,any> { .. render() { const { propToPass } = …

91 reactjs typescript redux electron jsx

14

React Native - moduł wymagania obrazu przy użyciu nazw dynamicznych

Obecnie tworzę aplikację testową przy użyciu React Native. Jak dotąd moduł obrazu działał dobrze. Na przykład, gdybym miał nazwany obraz avatar, poniższy fragment kodu działa dobrze. <Image source={require('image!avatar')} /> Ale jeśli zmienię go na dynamiczny ciąg, otrzymam <Image source={require('image!' + 'avatar')} /> Wyskakuje mi błąd: Wymaganie nieznanego modułu „image! Avatar”. …

87 javascript react-native jsx

6

ESLint z Reactem daje błędy `no-unused-vars '

Skonfigurowałem eslint& eslint-plugin-react. Kiedy uruchamiam ESLint, linter zwraca no-unused-varsbłędy dla każdego komponentu React. Zakładam, że nie rozpoznaje, że używam składni JSX lub React. Jakieś pomysły? Przykład: app.js import React, { Component } from 'react'; import Header from './header.js'; export default class App extends Component { render() { return ( <div> …

86 javascript reactjs jsx eslint

17

Jak komentować kod JSX w plikach .js w VSCode?

W przeciwieństwie do burzy internetowej, nie mogę komentować kodu JSX w .jsplikach w Visual Studio Code.

81 reactjs react-native visual-studio-code jsx

Pytania otagowane jako jsx