Perguntas com a marcação «jsx»

7
ReactJs: Quais devem ser os PropTypes para this.props.children?
Dado um componente simples que gera seus filhos: class ContainerComponent extends Component { static propTypes = { children: PropTypes.object.isRequired, } render() { return ( <div> {this.props.children} </div> ); } } export default ContainerComponent; Pergunta: Qual deve ser o propType das crianças prop? Quando eu o defino como objeto, ele falha …

6
ReactJS - .JS vs .JSX
Há algo que acho muito confuso ao trabalhar React. Existem muitos exemplos disponíveis na internet que usam .jsarquivos com react, mas muitos outros usam .jsxarquivos. Eu li sobre .jsxarquivos e meu entendimento é que eles permitem que você escreva tags html dentro do seu javascript. Mas a mesma coisa pode …
211 reactjs  jsx 

13
Como usar componentWillMount () nos ganchos de reação?
Nos documentos oficiais do React, ele menciona - Se você estiver familiarizado com os métodos do ciclo de vida da classe React, considere usar o Hook Effect como componentDidMount, componentDidUpdate e componentWillUnmount combinados. Minha pergunta é - como podemos usar o componentWillMount()método de ciclo de vida em um gancho?

5
Nome da tag dinâmica em jsx e React
Eu tento escrever um componente React. para tags de cabeçalho html (h1, h2, h3, etc ...), em que a prioridade do cabeçalho muda dinamicamente com base na prioridade que definimos nos adereços. Aqui o que eu tento fazer. <h{this.props.priority}>Hello</h{this.props.priority}> resultado esperado: <h1>Hello</h1> Isto não está a funcionar. Existe algum método …
162 reactjs  jsx 

11
Renderizar string HTML como HTML real em um componente React
Aqui está o que eu tentei e como dá errado. Isso funciona: <div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} /> Isto não: <div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /> A propriedade description é apenas uma sequência normal de conteúdo HTML. No entanto, é renderizado como uma sequência, não como HTML por algum …
159 javascript  html  reactjs  jsx 

11
React.js: identificando diferentes entradas com um manipulador onChange
Curioso, qual é a maneira correta de abordar isso: 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 …
141 javascript  reactjs  jsx 

12
TypeScript e React - tipo filho?
Eu tenho um componente funcional muito simples como segue: import * as React from 'react'; export interface AuxProps { children: React.ReactNode } const aux = (props: AuxProps) => props.children; export default aux; E outro componente: import * as React from "react"; export interface LayoutProps { children: React.ReactNode } const layout …

6
Por que os adereços JSX não deveriam usar funções de seta ou vincular?
Estou executando o lint com meu aplicativo React e recebo este erro: error JSX props should not use arrow functions react/jsx-no-bind E é aqui que estou executando a função de seta (dentro 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: …

6
& nbsp jsx não funciona
Estou usando a tag & nbsp em jsx e ela não está renderizando o espaço. A seguir está um pequeno trecho do meu código. Por favor, ajude. 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:  …
99 html  reactjs  jsx 

3
Por que `MouseEvent` no manipulador de eventos da caixa de seleção não é genérico?
Eu tenho uma caixa de seleção do elemento TSX (JSX): <input type="checkbox" name={i.toString()} onClick={this.handleCheckboxClick} /> Com a ajuda do código VS, sei que o tipo de parâmetro de entrada do this.handleCheckboxClické MouseEvent<HTMLInputElement>. Então, eu implementei com: private handleCheckboxClick(event: MouseEvent<HTMLInputElement>) { ... } Então recebo um erro dizendo [ts] Type 'MouseEvent' …

3
Typescript + React / Redux: A propriedade “XXX” não existe no tipo 'IntrinsicAttributes & IntrinsicClassAttributes
Estou trabalhando em um projeto com Typescript, React e Redux (todos rodando em Electron), e tive um problema ao incluir um componente baseado em classe em outro e tentar passar parâmetros entre eles. Em termos gerais, tenho a seguinte estrutura para o componente do contêiner: class ContainerComponent extends React.Component<any,any> { …

6
ESLint com React fornece erros `no-unused-vars`
Eu configurei eslint& eslint-plugin-react. Quando executo o ESLint, o linter retorna no-unused-varserros para cada componente React. Presumo que ele não esteja reconhecendo que estou usando a sintaxe JSX ou React. Alguma ideia? Exemplo: app.js import React, { Component } from 'react'; import Header from './header.js'; export default class App extends …
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.