Perguntas com a marcação «reactjs»

Eu queria verificar o que acontece quando você usa this.setState várias vezes (2 vezes para fins de discussão). Achei que o componente seria renderizado duas vezes, mas aparentemente só foi renderizado uma vez. Outra expectativa que eu tinha era que talvez a segunda chamada para setState superasse a primeira, mas …

101 javascript  reactjs 

Estou tendo um pequeno problema ao migrar do React-Router v3 para v4. na v3, consegui fazer isso em qualquer lugar: import { browserHistory } from 'react-router'; browserHistory.push('/some/path'); Como faço para conseguir isso na v4. Eu sei que poderia usar o hoc withRouter, o contexto de reação ou os adereços do …

101 reactjs  react-router 

Acabei de começar a usar create-react-app com typescript create-react-app my-app --scripts-version=react-scripts-ts e a configuração padrão tslint.json não permite console.log (). Como posso (por enquanto) habilitar console.log? Os documentos para isso estão em https://palantir.github.io/tslint/rules/no-console/ . Mas eles não dizem onde colocar esta linha: "no-console": [true, "log", "error"] Eu pesquisei e encontrei …

101 reactjs  typescript  create-react-app  tslint 

Eu tenho um arquivo test_stuff.js com o qual estou executando npm test É mais ou menos assim: import { assert } from 'assert'; import { MyProvider } from '../src/index'; import { React } from 'react'; const myProvider = ( <MyProvider> </MyProvider> ); describe('Array', function() { describe('#indexOf()', function() { it('should return …

101 javascript  reactjs  npm  react-jsx 

Sou novo no react.js, implementei um componente no qual estou buscando os dados do servidor e o uso como, CallEnterprise:function(TenantId){ fetchData('http://xxx.xxx.xx.xx:8090/Enterprises?TenantId='+TenantId+' &format=json').then(function(enterprises) { EnterprisePerspectiveActions.getEnterprise(enterprises); }).catch(function() { alert("There was some issue in API Call please contact Admin"); //ComponentAppDispatcher.handleViewAction({ // actionType: MetaItemConstants.RECEIVE_ERROR, // error: 'There was a problem getting the enterprises' //}); …

101 javascript  reactjs  configuration  webpack  flux 

Recentemente, tenho estudado muito sobre a funcionalidade e as formas de usar a biblioteca JavaScript do Facebook React.js. Quando se fala de suas diferenças com o resto do mundo JavaScript muitas vezes os dois estilos de programação declarativee imperativesão mencionada. Qual é a diferença entre os dois?

101 reactjs 

PropTypes e Flow cobrem coisas semelhantes, mas usam abordagens diferentes. Os PropTypes podem fornecer avisos durante o tempo de execução, o que pode ser útil para encontrar rapidamente respostas malformadas vindas de um servidor, etc. No entanto, o Flow parece ser o futuro e com conceitos como genéricos é uma …

100 reactjs  flowtype  react-proptypes 

Uma linha funciona bem render: function () { return ( {[1,2,3].map(function (n) { return <p>{n}</p> }} ); } não para várias linhas render: function () { return ( {[1,2,3].map(function (n) { return ( <h3>Item {n}</h3> <p>Description {n}</p> ) }} ); } Obrigado.

100 reactjs 

Tendo este código em mente: var Component = React.createClass({ getInitialState: function () { return {position: 0}; }, componentDidMount: function () { setTimeout(this.setState({position: 1}), 3000); }, render: function () { return ( <div className="component"> {this.state.position} </div> ); } }); ReactDOM.render( <Component />, document.getElementById('main') ); O estado não deveria mudar somente após …

100 javascript  reactjs 

Tenho um componente que criei: class Create extends Component { constructor(props) { super(props); } render() { var playlistDOM = this.renderPlaylists(this.props.playlists); return ( <div> {playlistDOM} </div> ) } activatePlaylist(playlistId) { debugger; } renderPlaylists(playlists) { return playlists.map(playlist => { return <div key={playlist.playlist_id} onClick={this.activatePlaylist(playlist.playlist_id)}>{playlist.playlist_name}</div> }); } } function mapStateToProps(state) { return { playlists: …

100 javascript  reactjs  redux 

Estou apenas começando com Reactjs e estava escrevendo um componente simples para exibir a litag e me deparei com este erro: Token inesperado '<' Coloquei o exemplo em jsbin abaixo de http://jsbin.com/UWOquRA/1/edit?html,js,console,output Por favor, deixe-me saber o que estou fazendo de errado.

99 reactjs 

Tenho um sidenav com vários times de basquete. Portanto, gostaria de mostrar algo diferente para cada equipe quando um deles está sendo pairado. Além disso, estou usando Reactjs, então se eu pudesse ter uma variável que pudesse passar para outro componente, seria incrível.

99 hover  reactjs 

Sempre que tento usar um ícone Font Awesome no React's render(), ele não é exibido na página da web resultante, embora funcione em HTML normal. render: function() { return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>; } Aqui está um exemplo ao vivo: http://jsfiddle.net/pLWS3/ Onde está a culpa?

99 reactjs  font-awesome 

Então, aqui está meu fluxo de trabalho atual para importar imagens e ícones no webpack via ES6: import cat from './images/cat1.jpg' import cat2 from './images/cat2.svg' import doggy from './images/doggy.png' import turtle from './images/turtle.png' <img src={doggy} /> Isso fica bagunçado rápido. Aqui está o que eu quero: import * from './images' …

99 reactjs  webpack  ecmascript-6 

Estou usando a tag & nbsp em jsx e ela não está renderizando o espaço. A seguir está um pequeno trecho do meu código. Por favor, ajude. var Reporting=React.createClass({ render: function(){ return( <div style={divPositionReporting}> <p>Pricing Reports</p> <hr></hr> Select Scenario:   <select> <option></option> </select> <button type="button">Get Pricing Report</button> <br/> Select Takeout Scenario:  …

99 html  reactjs  jsx