Articles of reajs

Quand devrais-je utiliser React.cloneElement vs this.props.children?

Je suis toujours un noob chez React et dans de nombreux exemples sur internet, je vois cette variation dans le rendu des éléments enfants que je trouve déroutant. Normalement je vois ceci: class Users extends React.Component { render() { return ( Users {this.props.children} ) } } Mais alors je vois un exemple comme ceci: {React.cloneElement(this.props.children, […]

ReactJS: setState sur le parent dans le composant enfant

Quel est le modèle recommandé pour faire un setState sur un parent d’un composant enfant. var Todos = React.createClass({ getInitialState: function() { return { todos: [ “I am done”, “I am not done” ] } }, render: function() { var todos = this.state.todos.map(function(todo) { return {todo}; }); return Todo(s) {todos} ; } }); var TodoForm […]

Pourquoi ref = ‘ssortingng’ est-il «inheritance»?

Dans la documentation de React, ils disent: React prend également en charge l’utilisation d’une chaîne (au lieu d’un rappel) comme référence sur n’importe quel composant, bien que cette approche soit essentiellement héritée à ce stade. https://facebook.github.io/react/docs/more-about-refs.html Prenons l’exemple suivant: class Foo extends Component { render() { return this.action()} ref={input => (this._input = input)} />; } […]

Obtenir un nœud DOM à partir d’un élément enfant React

En utilisant la méthode React.findDOMNode introduite en v0.13.0, je peux obtenir le noeud DOM de chaque composant enfant transmis à un parent en mappant this.props.children . Cependant, si certains enfants sont des éléments de réaction plutôt que des composants (par exemple, un des enfants est un créé via JSX), React génère une erreur de violation […]

Quand bindActionCreators serait-il utilisé dans react / redux?

En regardant les documents redux pour bindActionCreators et il indique que: Le seul cas d’utilisation de bindActionCreators est lorsque vous souhaitez transmettre certains créateurs d’action à un composant qui ne connaît pas Redux, et que vous ne souhaitez pas y transférer dispatch ou le magasin Redux. Quel serait un exemple où bindActionCreators serait utilisé / […]

comment rendre les composants de réaction en utilisant la carte et rejoindre

J’ai un composant qui va afficher Array of Ssortingng. Le code ressemble à ceci. React.createClass({ render() { this.props.data.map(t => t) } }) Cela fonctionne parfaitement bien. ie si props.data = [‘tom’, ‘jason’, ‘chris’] Le résultat rendu dans la page serait tomjasonchris Ensuite, je veux joindre tous les noms en utilisant des virgules, donc je change […]

Comment utiliser jest avec webpack?

J’utilise webpack pour développer un composant React. Voici une version simple: ‘use ssortingct’; require(‘./MyComponent.less’); var React = require(‘react’); var MyComponent = React.createClass({ render() { return ( Hello World ); } }); module.exports = MyComponent; Maintenant, je voudrais tester ce composant en utilisant jest . Voici le bit pertinent de mon package.json : “scripts”: { “test”: […]

Comment configurer Babel 6 stage 0 avec React et Webpack

Ma compréhension des docs Je vois que Babel 6 a trois presets pour l’instant: es2015, react et stage-x. J’ai lu que je peux définir ceux de .babelrc comme .babelrc : { “presets”: [“es2015”, “react”, “stage-0”] } ou directement dans package.JSON ainsi: { …, “version”: xxx, “babel”: { “presets”: [“es2015”, “react”, “stage-0”] }, …, } Je […]

Qu’est-ce que le groupement à plat et pourquoi Rollup est-il meilleur que Webpack?

Je me suis récemment penché sur le cumul et sur la différence avec Webpack et les autres bundlers. Une chose que je suis tombé sur le fait que c’est mieux pour les bibliothèques à cause du “flat bundling”. Ceci est basé sur un tweet et un PR récent pour React pour utiliser Rollup . D’après […]

Différence entre déclaratif et impératif dans React.js?

Récemment, j’ai beaucoup étudié la fonctionnalité et les façons d’utiliser la bibliothèque JavaScript de Facebook React.js. En parlant de ses différences avec le rest du monde JavaScript, les deux styles de programmation declarative et imperative sont souvent mentionnés. Quelle est la différence entre les deux?