Perguntas com a marcação «reactjs»

No React (estrutura do Facebook), preciso renderizar um elemento de rótulo associado a uma entrada de texto usando o foratributo padrão . por exemplo, o seguinte JSX é usado: <label for="test">Test</label> <input type="text" id="test" /> No entanto, isso produz HTML sem o foratributo necessário (e padrão) : <label>Test</label> <input type="text" …

250 reactjs  label 

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

248 javascript  reactjs  computed-properties 

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, end: PropTypes.number.isRequired, })), Estou perdendo algo super óbvio aqui? Parece que isso …

244 arrays  reactjs  react-proptypes 

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

244 reactjs  react-proptypes 

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 . Melhore esta pergunta Eu descobri recentemente o Redux . …

243 reactjs  redux  flux  reactjs-flux 

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 …

229 javascript  reactjs  react-jsx 

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 …

226 javascript  reactjs  decorator  redux 

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 : existe algum impacto no desempenho React.Componentque possamos considerar React.PureComponent? Eu estou supondo …

224 reactjs  state 

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 de destino (o componente …

219 javascript  reactjs  redux  react-redux 

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 exemplo: componentWillReceiveProps: function(nextProps) { this.setState({ likesIncreasing: nextProps.likeCount > this.props.likeCount }); } Isso …

217 javascript  reactjs  properties 

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'); });

216 reactjs  react-router 

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. http://codepen.io/aallbrig/pen/bEhjo HTML <div id="my-component"> <p>Hi!</p> </div> ReactJS /**@jsx …

215 javascript  reactjs 

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 que estão em seu estado e tê-las …

214 javascript  reactjs 

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 consigo encontrar uma maneira de acessá-lo a partir do objeto de evento, por exemplo: render: …

214 javascript  facebook  reactjs 

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" onKeyPress={this.add} /> </div> ); } }); React.render(<Test />, document.body);

214 javascript  reactjs  keypress  onkeypress