Perguntas com a marcação «jsx»

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 …

265 reactjs  jsx  react-proptypes 

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 

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?

176 javascript  reactjs  jsx  react-hooks 

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 

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 

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 

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 …

138 reactjs  typescript  jsx  typescript2.0 

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: …

103 javascript  reactjs  ecmascript-6  jsx  arrow-functions 

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 

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' …

97 reactjs  typescript  events  types  jsx 

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> { …

96 reactjs  typescript  redux  electron  jsx 

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 …

86 javascript  reactjs  jsx  eslint