Perguntas com a marcação «reactjs»

Estou começando a usar o Facebook React em um projeto de Backbone e até agora está indo muito bem. No entanto, notei alguma duplicação se infiltrando em meu código React. Por exemplo, tenho vários widgets semelhantes a formulários com estados como INITIAL, SENDINGe SENT. Quando um botão é pressionado, o …

116 javascript  refactoring  mixins  reactjs 

Eu sei que não devo alterar a entrada e devo clonar o objeto para alterá-lo. Eu estava seguindo a convenção usada em um projeto redux starter que usava: ADD_ITEM: (state, action) => ({ ...state, items: [...state.items, action.payload.value], lastUpdated: action.payload.date }) para adicionar um item - eu uso o spread para …

116 javascript  reactjs  redux 

Estou começando com React.js e quero fazer um formulário simples, mas na documentação, encontrei duas maneiras de fazê-lo. O primeiro está usando Refs : var CommentForm = React.createClass({ handleSubmit: function(e) { e.preventDefault(); var author = React.findDOMNode(this.refs.author).value.trim(); var text = React.findDOMNode(this.refs.text).value.trim(); if (!text || !author) { return; } // TODO: send …

116 reactjs 

Eu sei em vanilla js, podemos fazer onclick="f1();f2()" Qual seria o equivalente para fazer duas chamadas de função onClick no ReactJS? Eu sei que chamar uma função é assim: onClick={f1}

116 javascript  reactjs 

Tenho o seguinte componente ( radioOther.jsx): 'use strict'; //module.exports = <-- omitted in update class RadioOther extends React.Component { // omitted in update // getInitialState() { // propTypes: { // name: React.PropTypes.string.isRequired // } // return { // otherChecked: false // } // } componentDidUpdate(prevProps, prevState) { var otherRadBtn = …

115 reactjs  ecmascript-6 

Recebendo este erro ao construir um aplicativo iOS nativo reactivo no xcode. Começou a receber este erro após npm install e rpm vincular a biblioteca react -native-fs Mas depois de pesquisar online por uma solução, percebi que muitas pessoas estão recebendo o mesmo erro ao instalar outras bibliotecas nativas react. …

115 ios  xcode  reactjs  native  react-native-ios 

É possível obter a posição de rolagem atual ou a página atual de um <ScrollView>componente no React Native? Então, algo como: <ScrollView horizontal={true} pagingEnabled={true} onScrollAnimationEnd={() => { // get this scrollview's current page or x/y scroll position }}> this.state.data.map(function(e, i) { <ImageCt key={i}></ImageCt> }) </ScrollView>

115 ios  reactjs  react-native 

Normalmente, para incluir a maioria dos meus ícones SVG que exigem um estilo simples, eu faço: <svg> <use xlink:href="/svg/svg-sprite#my-icon" /> </svg> Agora estou brincando com ReactJS ultimamente, avaliando-o como um possível componente em minha nova pilha de desenvolvimento de front-end, no entanto, percebi que em sua lista de tags / …

114 svg  sprite  reactjs 

Nosso aplicativo usa rolagem infinita para navegar por grandes listas de itens heterogêneos. Existem algumas rugas: É comum que nossos usuários tenham uma lista de 10.000 itens e precisem percorrer 3k +. Esses são itens ricos, portanto, podemos ter apenas algumas centenas no DOM antes que o desempenho do navegador …

114 javascript  html  infinite-scroll  reactjs 

Uma das maiores vantagens do React.js deve ser a renderização do lado do servidor . O problema é que a função chave React.renderComponentToString()é síncrona, o que torna impossível carregar quaisquer dados assíncronos conforme a hierarquia do componente é renderizada no servidor. Digamos que eu tenha um componente universal para comentários …

114 node.js  reactjs  flux  reactjs-flux 

Eu sei que esta pergunta já foi feita algumas vezes, mas na maioria das vezes, a solução é lidar com isso no pai, pois o fluxo de responsabilidade é apenas decrescente. No entanto, às vezes, você precisa eliminar um componente de um de seus métodos. Eu sei que não posso …

114 reactjs  unmount 

Aqui está um componente básico. Tanto o <ul>e <li>têm funções onClick. Quero apenas o onClick no <li>para disparar, não o <ul>. Como posso conseguir isso? Eu brinquei com e.preventDefault (), e.stopPropagation (), sem sucesso. class List extends React.Component { constructor(props) { super(props); } handleClick() { // do something } render() …

114 reactjs  onclick  event-propagation 

Acabei de começar a explorar o React, adicionando um componente com uma função de renderização simples: render() { return <div class="myApp"></div> } Quando executo o aplicativo, recebo o seguinte erro: Warning: Unknown DOM property class. Did you mean className? Posso resolver isso mudando classpara className. A questão é; O React …

114 javascript  reactjs  react-jsx 

Tenho brincado com o React e tenho o seguinte componente de tempo que apenas renderiza Date.now()na tela: import React, { Component } from 'react'; class TimeComponent extends Component { constructor(props){ super(props); this.state = { time: Date.now() }; } render(){ return( <div> { this.state.time } </div> ); } componentDidMount() { console.log("TimeComponent …

114 javascript  reactjs 

Hoje comecei a aprender ReactJS e depois de uma hora enfrentei o problema .. Quero inserir um componente que tem duas linhas dentro de uma div na página. Um exemplo simplificado do que estou fazendo abaixo. Eu tenho um html: <html> .. <div id="component-placeholder"></div> .. </html> Renderizar a função como …

114 javascript  reactjs