Questions marquées «jsx»

7
ReactJs: Quels devraient être les PropTypes pour this.props.children?
Étant donné un composant simple qui rend ses enfants: class ContainerComponent extends Component { static propTypes = { children: PropTypes.object.isRequired, } render() { return ( <div> {this.props.children} </div> ); } } export default ContainerComponent; Question: Quel doit être le propType de l'hélice pour enfants? Lorsque je le définis en tant …
6
ReactJS - .JS vs .JSX
Il y a quelque chose que je trouve très déroutant lorsque je travaille React. Il existe de nombreux exemples disponibles sur Internet qui utilisent des .jsfichiers avec react mais de nombreux autres utilisent des .jsxfichiers. J'ai lu des .jsxfichiers et je crois comprendre qu'ils vous permettent juste d'écrire des balises …
211 reactjs  jsx 
13
Comment utiliser componentWillMount () dans React Hooks?
Dans les documents officiels de React, il mentionne - Si vous êtes familier avec les méthodes de cycle de vie de classe React, vous pouvez considérer useEffect Hook comme composantDidMount, componentDidUpdate et componentWillUnmount combinés. Ma question est la suivante: comment pouvons-nous utiliser la componentWillMount()méthode du cycle de vie dans un …
5
Nom de balise dynamique dans jsx et React
J'essaye d'écrire un composant React. pour les balises d'en-tête html (h1, h2, h3, etc ...), où la priorité de l'en-tête change dynamiquement en fonction de la priorité que nous avons définie dans les accessoires. Voici ce que j'essaye de faire. <h{this.props.priority}>Hello</h{this.props.priority}> production attendue: <h1>Hello</h1> Cela ne fonctionne pas. Existe-t-il une …
163 reactjs  jsx 
11
Rendre la chaîne HTML en tant que vrai HTML dans un composant React
Voici ce que j'ai essayé et comment ça va mal. Cela marche: <div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} /> Cela ne: <div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /> La propriété description est simplement une chaîne normale de contenu HTML. Cependant, il est rendu sous forme de chaîne et non de HTML …
163 javascript  html  reactjs  jsx 
11
React.js: identification de différentes entrées avec un seul gestionnaire onChange
Curieux de savoir quelle est la bonne façon d'aborder cela: 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 = …
142 javascript  reactjs  jsx 
12
TypeScript et React - type enfants?
J'ai un composant fonctionnel très simple comme suit: import * as React from 'react'; export interface AuxProps { children: React.ReactNode } const aux = (props: AuxProps) => props.children; export default aux; Et un autre composant: import * as React from "react"; export interface LayoutProps { children: React.ReactNode } const layout …
6
Pourquoi les accessoires JSX ne devraient-ils pas utiliser les fonctions fléchées ou se lier?
J'exécute lint avec mon application React et je reçois cette erreur: error JSX props should not use arrow functions react/jsx-no-bind Et c'est là que j'exécute la fonction flèche (à l'intérieur 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, …
6
& nbsp jsx ne fonctionne pas
J'utilise la balise & nbsp dans jsx et cela ne rend pas l'espace. Ce qui suit est un petit extrait de mon code. Veuillez aider. var Reporting=React.createClass({ render: function(){ return( <div style={divPositionReporting}> <p>Pricing Reports</p> <hr></hr> Select Scenario:   <select> <option></option> </select> <button type="button">Get Pricing Report</button> <br/> Select Takeout Scenario:  <select> <option></option> …
99 html  reactjs  jsx 
3
Pourquoi «MouseEvent» dans le gestionnaire d'événements de case à cocher n'est-il pas générique?
J'ai un élément TSX (JSX) checkbox: <input type="checkbox" name={i.toString()} onClick={this.handleCheckboxClick} /> Avec l'aide du code VS, je sais que le type de paramètre d'entrée du this.handleCheckboxClickest MouseEvent<HTMLInputElement>. Alors je l'ai implémenté avec: private handleCheckboxClick(event: MouseEvent<HTMLInputElement>) { ... } Ensuite, j'obtiens une erreur disant [ts] Type 'MouseEvent' is not generic.comme indiqué …
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.