Perguntas com a marcação «reactjs»

Quero fazer um componente React arrastável (isto é, reposicionável pelo mouse), que parece necessariamente envolver o estado global e manipuladores de eventos dispersos. Posso fazer isso da maneira suja, com uma variável global em meu arquivo JS, e provavelmente poderia até envolvê-lo em uma interface de encerramento agradável, mas quero …

97 javascript  reactjs 

Construí um aplicativo com ReactNative para iOS e Android com um ListView. Ao preencher o listview com uma fonte de dados válida, o seguinte aviso é impresso na parte inferior da tela: Aviso: cada filho em uma matriz ou iterador deve ter uma prop "chave" exclusiva. Verifique o método de …

97 facebook  listview  reactjs  react-native 

Como posso acionar manualmente um evento de clique no ReactJS ? Quando um usuário clica no element1, desejo acionar automaticamente um clique na inputtag. <div className="div-margins logoContainer"> <div id="element1" className="content" onClick={this.uploadLogoIcon}> <div className="logoBlank" /> </div> <input accept="image/*" type="file" className="hide"/> </div>

97 html  reactjs 

Além da capacidade de definir um "activeClassName" e "activeStyle" no NavLink, há alguma razão para usar o NavLink sobre o link ao criar links para outras rotas em elementos não navegacionais (ou seja, não nav principal no cabeçalho ou rodapé) em seu site que não precisa de um estado / …

97 reactjs  react-router  react-router-v4 

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 

Não posso acreditar que estou fazendo uma pergunta óbvia, mas ainda recebo o erro no log do console. O console diz que não consegue encontrar o módulo no diretório, mas verifiquei pelo menos 10 vezes em busca de erros de digitação. De qualquer forma, aqui está o código do componente. …

97 javascript  reactjs 

Experimentando o TypeScript para um projeto React e estou preso neste erro: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ train_1: boolean; train_2: boolean; train_3: boolean; train_4: boolean; }'. No index signature with a parameter of type 'string' was found …

97 reactjs  typescript 

Eu sou novo na Biblioteca React.js e estava lendo alguns dos tutoriais e me deparei com: this.setState this.replaceState A descrição dada não é muito clara (IMO). setState is done to 'set' the state of a value, even if its already set in the 'getInitialState' function. Similarmente, The replaceState() method is …

96 javascript  frontend  reactjs 

Eu construí um site com React.js e webpack . Quero usar fontes do Google na página da web, então coloco o link na seção. Fontes do Google <link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"> E definir CSS body{ font-family: 'Bungee Inline', cursive; } No entanto, não funciona. Como posso resolver esse problema?

96 reactjs  webpack  google-font-api 

Eu sou novo no ReactJs. Este é o meu código: var React = require('react'); var ReactDOM = require('react-dom'); var {Route, Router, IndexRoute, hashHistory} = require('react-router'); var Main = require('Main'); ReactDOM.render( <Router history={hashHistory}> <Route path="/" component={Main}></Route> </Router>, document.getElementById('app')); e compilá-lo com o webpack. Além disso, adicionei o componente principal aos meus …

96 reactjs  react-router 

Estou tentando descobrir como alternar uma classe ativa onClickpara alterar as propriedades CSS. Eu fiz muitas abordagens e li muitas respostas de SO. Usar jquery seria relativamente simples, no entanto, não consigo descobrir como fazer isso com o react. Meu código está abaixo. Alguém pode aconselhar como devo fazer isso? …

96 javascript  reactjs 

Só consigo ver o aplicativo real em /public. As configurações em webpack.config.jsestão abaixo: var path = require('path'); var webpack = require('webpack'); module.exports = { entry: [ 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server', './app/js/App.js' ], output: { path: path.join(__dirname, 'public'), filename: 'bundle.js', publicPath: 'http://localhost:8080' }, module: { loaders: [ { test: /\.js$/, loaders: ['react-hot', 'babel-loader'], …

96 node.js  reactjs  webpack  reactjs-flux  webpack-dev-server 

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 entendo como (e por que ) adicionar um espaço em branco no JSX, mas estou me perguntando qual é a melhor prática ou se alguma faz alguma diferença real? Envolva os dois elementos em um intervalo <div className="top-element-formatting"> <span>Hello </span> <span className="second-word-formatting">World!</span> </div> Adicione-os em uma linha <div className="top-element-formatting"> …

96 javascript  reactjs  react-jsx 

antes de postar esta questão, tentei pesquisar em sqa stackexchange, mas não encontrei nenhuma postagem sobre raso e renderização lá, então espero que alguém possa me ajudar aqui. Quando devo usar raso e render no teste de componentes de reação? Com base nos documentos do airbnb, fiz algumas opiniões sobre …

95 testing  meteor  reactjs  chai  enzyme