Programmazione jsx

7

ReactJs: quali dovrebbero essere i PropTypes per this.props.children?

Dato un componente semplice che rende i suoi figli: class ContainerComponent extends Component { static propTypes = { children: PropTypes.object.isRequired, } render() { return ( <div> {this.props.children} </div> ); } } export default ContainerComponent; Domanda: quale dovrebbe essere il propType del puntello per bambini? Quando lo imposto come oggetto, non …

265 reactjs jsx react-proptypes

6

ReactJS - .JS vs .JSX

C'è qualcosa che trovo molto confuso quando lavoro React. Ci sono molti esempi disponibili su Internet che usano i .jsfile con reazioni, ma molti altri usano i .jsxfile. Ho letto dei .jsxfile e la mia comprensione è che ti permettono di scrivere tag html nel tuo javascript. Ma la stessa …

211 reactjs jsx

13

Come usare componentWillMount () in React Hooks?

Nei documenti ufficiali di React menziona: Se hai familiarità con i metodi del ciclo di vita della classe React, puoi pensare a useEffect Hook come componentDidMount, componentDidUpdate e componentWillUnmount combinati. La mia domanda è: come possiamo usare il componentWillMount()metodo del lifecyle in un gancio?

176 javascript reactjs jsx react-hooks

5

Nome tag dinamico in jsx e React

Provo a scrivere un componente React. per i tag di intestazione html (h1, h2, h3, ecc ...), in cui la priorità dell'intestazione cambia dinamicamente in base alla priorità che abbiamo definito nei puntelli. Ecco cosa provo a fare. <h{this.props.priority}>Hello</h{this.props.priority}> uscita prevista: <h1>Hello</h1> Questo non funziona. Esiste un metodo possibile per …

163 reactjs jsx

11

Rendering della stringa HTML come HTML reale in un componente React

Ecco cosa ho provato e come va storto. Questo funziona: <div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} /> Questo non: <div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /> La proprietà description è solo una normale stringa di contenuto HTML. Tuttavia è reso come una stringa, non come HTML per qualche motivo. Eventuali suggerimenti?

162 javascript html reactjs jsx

11

React.js: identificazione di input diversi con un gestore onChange

Curioso quale sia il modo giusto di affrontarlo: 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 e React - tipo di bambini?

Ho un componente funzionale molto semplice come segue: import * as React from 'react'; export interface AuxProps { children: React.ReactNode } const aux = (props: AuxProps) => props.children; export default aux; E un altro componente: import * as React from "react"; export interface LayoutProps { children: React.ReactNode } const layout …

138 reactjs typescript jsx typescript2.0

6

Perché gli oggetti di scena JSX non dovrebbero usare le funzioni freccia o bind?

Sto eseguendo lanugine con la mia app React e ricevo questo errore: error JSX props should not use arrow functions react/jsx-no-bind Ed è qui che sto eseguendo la funzione freccia (all'interno 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, …

103 javascript reactjs ecmascript-6 jsx arrow-functions

6

& nbsp jsx non funziona

Sto usando il tag & nbsp in jsx e non esegue il rendering dello spazio. Quello che segue è un piccolo frammento del mio codice. Per favore aiuto. 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 …

99 html reactjs jsx

3

Typescript + React / Redux: la proprietà "XXX" non esiste nel tipo "IntrinsicAttributes & IntrinsicClassAttributes

Sto lavorando a un progetto con Typescript, React e Redux (tutti in esecuzione in Electron) e ho riscontrato un problema quando includo un componente basato sulla classe in un altro e provo a passare parametri tra di loro. In parole povere, ho la seguente struttura per il componente contenitore: class …

96 reactjs typescript redux electron jsx

6

ESLint con React restituisce errori "no-unused-vars"

Ho configurato eslint& eslint-plugin-react. Quando eseguo ESLint, il linter restituisce no-unused-varserrori per ogni componente React. Presumo che non riconosca che sto usando la sintassi JSX o React. Qualche idea? Esempio: app.js import React, { Component } from 'react'; import Header from './header.js'; export default class App extends Component { render() …

91 javascript reactjs jsx eslint

14

React Native - Modulo di richiesta immagine utilizzando nomi dinamici

Attualmente sto creando un'app di test utilizzando React Native. Il modulo Immagine, finora, ha funzionato bene. Ad esempio, se avessi un'immagine denominata avatar, lo snippet di codice seguente funziona bene. <Image source={require('image!avatar')} /> Ma se lo cambio in una stringa dinamica, ottengo <Image source={require('image!' + 'avatar')} /> Ottengo l'errore: Richiede …

87 javascript react-native jsx

Domande taggate «jsx»