EDIT: esta é uma duplicata, veja aqui Não consigo encontrar exemplos de como usar um nome de chave dinâmica ao definir o estado. Isto é o que eu quero fazer: inputChangeHandler : function (event) { this.setState( { event.target.id : event.target.value } ); }, onde event.target.id é usado como a...
Existe uma maneira interna de usar proptypes para garantir que uma matriz de objetos que está sendo passada para um componente seja realmente uma matriz de objetos de uma forma específica? Talvez algo assim? annotationRanges: PropTypes.array(PropTypes.shape({ start: PropTypes.number.isRequired,...
Eu tenho um componente que recebe um suporte para seu tamanho. O suporte pode ser uma sequência ou um número ex: "LARGE"ou 17. Posso informar ao React.PropTypes que esse pode ser um ou outro na validação de propTypes? Se eu não especificar o tipo, recebo um aviso: prop type `size` is invalid; it...
Fechado . Esta questão é baseada em opiniões . No momento, não está aceitando respostas. Deseja melhorar esta pergunta? Atualize a pergunta para que ela possa ser respondida com fatos e citações editando esta postagem . Fechado no ano passado .
Como opcionalmente incluo um elemento no JSX? Aqui está um exemplo usando um banner que deve estar no componente se ele foi passado. O que eu quero evitar é ter que duplicar as tags HTML na instrução if. render: function () { var banner; if (this.state.banner) { banner = <div...
Estou aprendendo Redux com React e me deparei com esse código. Não tenho certeza se é específico ao Redux ou não, mas vi o seguinte trecho de código em um dos exemplos. @connect((state) => { return { key: state.a.b }; }) Embora a funcionalidade de connectseja bastante direta, mas eu não...
O funcionário Reagir docs afirmam que " React.PureComponenté shouldComponentUpdate()única superficialmente compara os objetos", e aconselha contra esta se o estado é 'profunda'. Diante disso, existe alguma razão pela qual se deve preferir React.PureComponentao criar componentes React? Perguntas...
Estou tentando entender o método de conexão do react-redux e as funções que ele assume como parâmetros. Em particular mapStateToProps(). Pelo que entendi, o valor de retorno de mapStateToPropsserá um objeto derivado do estado (como ele vive na loja), cujas chaves serão passadas para o componente...
Depois de começar a trabalhar com o React.js, parece que ele propsdeve ser estático (transmitido do componente pai), enquanto as statealterações são baseadas em eventos. No entanto, notei nos documentos uma referência a componentWillReceiveProps, que inclui especificamente este...
Como podemos passar parâmetros this.props.history.push('/page')no React-Router v4? .then(response => { var r = this; if (response.status >= 200 && response.status < 300) { r.props.history.push('/template');
Existe uma maneira de passar um componente para outro componente de reação? Desejo criar um componente de reação do modelo e passar outro componente de reação para transcluir esse conteúdo. Edit: Aqui está um codepen reactJS ilustrando o que estou tentando fazer.
Como posso fazer o onKeyPressevento funcionar no ReactJS? Deve alertar quando enter (keyCode=13)é pressionado. var Test = React.createClass({ add: function(event){ if(event.keyCode == 13){ alert('Adding....'); } }, render: function(){ return( <div> <input type="text" id="one"...
Eu tenho a seguinte estrutura: FormEditor- contém vários FieldEditor FieldEditor- edita um campo do formulário e salva vários valores sobre ele no seu estado Quando um botão é clicado no FormEditor, desejo poder coletar informações sobre os campos de todos os FieldEditorcomponentes, informações...
O React é capaz de renderizar atributos personalizados, conforme descrito em http://facebook.github.io/react/docs/jsx-gotchas.html : Se você quiser usar um atributo customizado, prefixe-o com data-. <div data-custom-attribute="foo" /> E isso é uma ótima notícia, exceto que não...
No React, você pode criar claramente um objeto e atribuí-lo como um estilo embutido. ie mencionado abaixo. var divStyle = { color: 'white', backgroundImage: 'url(' + imgUrl + ')', WebkitTransition: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is the only lowercase vendor...
Meu projeto é baseado em create-react-app . npm startou, yarn startpor padrão, executará o aplicativo na porta 3000 e não há opção de especificar uma porta no package.json. Como posso especificar uma porta de minha escolha neste caso? Eu quero executar dois deste projeto simultaneamente (para...
Como centralizar o texto no ReactNative tanto na horizontal quanto na vertical? Eu tenho um exemplo de aplicativo em rnplay.org, em que justifyContent = "center" e alignItems = "center" não está funcionando: https://rnplay.org/apps/AoxNKQ O texto deve estar centralizado. E por que existe uma...
Depois de passar algum tempo aprendendo o React, entendo a diferença entre os dois principais paradigmas da criação de componentes. Minha pergunta é quando devo usar qual e por quê? Quais são os benefícios / tradeoffs de um sobre o outro? Classes ES6: import React, { Component } from...
Estou tentando enviar dados de um componente filho para o pai, da seguinte maneira: const ParentComponent = React.createClass({ getInitialState() { return { language: '', }; }, handleLanguageCode: function(langValue) { this.setState({language: langValue}); }, render() { return (...
Eu passo 2 valores para um componente filho: Lista de objetos a serem exibidos função de exclusão. Eu uso uma função .map () para exibir minha lista de objetos (como no exemplo dado na página do tutorial de reação), mas o botão desse componente aciona a onClickfunção no render (ele não deve...