Perguntas com a marcação «reactjs»

Tenho que implementar alguma lógica de negócios dependendo do histórico de navegação. O que eu quero fazer é algo assim: reactRouter.onUrlChange(url => { this.history.push(url); }); Existe alguma maneira de receber um retorno de chamada do react-router quando o URL é atualizado?

87 reactjs  react-router  react-router-v4  react-router-redux  react-router-dom 

Estou usando o StackNavigator da navegação nativa react (react-navigation). ele começa na página de Login ao longo de todo o ciclo de vida do aplicativo. Não quero ter a opção de voltar, voltando para a tela de Login. Alguém sabe como pode ficar oculto na tela após a tela de …

87 reactjs  react-native  navigation  react-navigation 

Estou armazenando um ref em minha loja redux e usando mapStateToProps para expor o ref para componentes que precisam de acesso a ele. A referência armazenada é semelhante a: ref={node => this.myRefToBePutInReduxGlobalStore = node} Qual é o propType correto para este ref?

87 reactjs 

Tentei pesquisar uma resposta para isso, mas a maioria delas está fora do contexto de React, onde onChangedispara após desfoque. Ao realizar vários testes, não consigo dizer como esses dois eventos são diferentes (quando aplicados a uma textarea). Alguém pode lançar alguma luz sobre isso?

86 javascript  reactjs  dom-events 

Eu tenho um arquivo de carrossel que desejo obter index.jse construir block.build.js, então meu webpack.config.jsé: var config = { entry: './index.js', output: { path: __dirname, filename: 'block.build.js', }, devServer: { contentBase: './Carousel' }, module : { rules : [ { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['react', …

86 reactjs  webpack  babeljs 

Eu tenho um problema ao usar o react-select. Eu uso redux form e tornei meu componente react-select compatível com redux form. Aqui está o código: const MySelect = props => ( <Select {...props} value={props.input.value} onChange={value => props.input.onChange(value)} onBlur={() => props.input.onBlur(props.input.value)} options={props.options} placeholder={props.placeholder} selectedValue={props.selectedValue} /> ); e aqui como eu o …

86 reactjs  default-value  react-select 

Tenho uma página da web complexa que usa componentes React e estou tentando converter a página de um layout estático para um layout mais responsivo e redimensionável. No entanto, continuo encontrando limitações com o React e me pergunto se existe um padrão para lidar com esses problemas. No meu caso …

86 javascript  reactjs  responsive 

Provavelmente estou perdendo algo muito óbvio e gostaria de me esclarecer. Aqui está o meu entendimento. Em um componente de reação ingênuo, temos states& props. Atualizar statecom setStaterenderiza novamente todo o componente. propssão geralmente somente leitura e atualizá-los não faz sentido. Em um componente react que se inscreve em um …

86 reactjs  redux  react-redux 

Problema Estou definindo uma reação refusando uma definição de função inline render = () => { return ( <div className="drawer" ref={drawer => this.drawerRef = drawer}> então, no componentDidMountDOM, a referência não está definida componentDidMount = () => { // this.drawerRef is not defined Meu entendimento é que o refretorno de …

86 javascript  reactjs 

Ao contrário de ListView, podemos atualizar this.state.datasource. Existe algum método ou exemplo para atualizar FlatList ou renderizá-lo novamente? Meu objetivo é atualizar o valor do texto quando o usuário pressiona o botão ... renderEntries({ item, index }) { return( <TouchableHighlight onPress={()=> this.setState({value: this.state.data[index].value+1})> <Text>{this.state.data[index].value}</Text> </TouchableHighlight> ) } <FlatList ref={(ref) => …

86 reactjs  react-native  react-native-flatlist 

No React, o estado não é atualizado instantaneamente, portanto, podemos usar o retorno de chamada em setState(state, callback). Mas como fazer no Redux? Depois de chamar o this.props.dispatch(updateState(key, value)), preciso fazer algo com o estado atualizado imediatamente. Existe alguma maneira de chamar um retorno de chamada com o estado mais …

86 javascript  reactjs  redux 

Meu objetivo é adicionar componentes dinamicamente em um componente de página / pai. Comecei com um modelo básico de exemplo como este: main.js: var App = require('./App.js'); var SampleComponent = require('./SampleComponent.js'); ReactDOM.render(<App/>, document.body); ReactDOM.render(<SampleComponent name="SomeName"/>, document.getElementById('myId')); App.js: var App = React.createClass({ render: function() { return ( <div> <h1>App main component! …

86 javascript  reactjs  babeljs 

Estou implementando uma lista filtrável com React. A estrutura da lista é mostrada na imagem abaixo. PREMISSA Aqui está uma descrição de como ele deve funcionar: O estado reside no componente de nível mais alto, o Searchcomponente. O estado é descrito da seguinte forma: { visível: booleano, arquivos: array, filtrado: …

86 javascript  list  reactjs 

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 

O estado inicial em um aplicativo Redux pode ser definido de duas maneiras: passe-o como o segundo argumento para createStore( link de documentos ) passe-o como o primeiro argumento para seus (sub) redutores ( link de documentos ) Se você passar o estado inicial para sua loja, como você lê …

85 javascript  reactjs  redux