web-dev-qa-db-fra.com

Est-il possible d'utiliser React sans rendu HTML?

Je me demandais s'il était possible d'utiliser React pour faire de la logique et renvoyer des données à une fonction javascript, sans restituer de code HTML. Le composant auquel je songe est quelque chose à quoi vous transmettez des données. Je sais que cela peut être fait, et j’ai fait cette partie moi-même, mais je ne sais pas comment vous pouvez le faire sans rendre le rendu HTML tel qu’il est requis Est-ce même un cas d'utilisation pratique pour réagir?

javascriptreactjs
61
zackify

À partir de React> = 16.2, il est possible d’utiliser l’une des versions suivantes:

render() { 
   return false; 
}

render() { 
   return null; 
}

render() { 
   return []; 
}

render() { 
   return <React.Fragment></React.Fragment>; 
}

render() { 
   return <></>; 
}

Retourner undefined ne fonctionne pas.

Le composant auquel je pense est une chose à laquelle vous transmettez des données, et il renverra les données à une fonction javascript en dehors de react.

Pourquoi voudriez-vous créer un composant pour cela? La plupart du temps, une fonction js normale dans un composant existant peut suffire.

Un cas d'utilisation consiste par exemple à configurer un effet secondaire lorsque le composant est monté et à le supprimer lorsqu'il se démonte. Par exemple, si vous avez une application mobile ReactNative à orientation portrait, vous pouvez imaginer un <Landscape/> composant, qui, une fois monté, permettrait d'afficher temporairement l'application en orientation paysage et, une fois démonté, l'orientation serait réinitialisée à celle par défaut de l'application. Vous pouvez certainement gérer cette modification d'orientation sur un composant existant, mais la création d'un composant dédié peut s'avérer plus pratique et réutilisable.

Notez que React peut aussi fonctionner du côté serveur, donc je suppose qu'il est possible de l'utiliser de telle sorte qu'il n'entraîne aucune modification du DOM (mais peut-être uniquement le calcul du DOM virtuel) .

64
Sebastien Lorber

Juste pour clarifier les commentaires de benno. La doc de la méthode ReactComponent.render indique:

Vous pouvez également renvoyer null ou false pour indiquer que vous ne voulez rien restituer. En coulisse, React rend une balise <noscript> Compatible avec notre algorithme de diffing actuel. Lors du renvoi de null ou false, this.getDOMNode() retournera null.

22
mjhm

C'est possible. react-router est un exemple de bibliothèque dont les composants ne rendent pas le code HTML. Voir https://github.com/rackt/react-router

C'est le composant Route de react-fouter avec une méthode de rendu qui renvoie false:


const Route = React.createClass({

  statics: {
    createRouteFromReactElement
  },

  propTypes: {
    path: string,
    component,
    components,
    getComponent: func,
    getComponents: func
  },

  /* istanbul ignore next: sanity check */
  render() {
    invariant(
      false,
      '<Route> elements are for router configuration only and should not be rendered'
    )
  }

})
13
Jagare

Oui, c'est très possible et très utile en cas de chargement paresseux des composants.

Considérez cet exemple avec react-router.

import React from 'react'
import { Route, Link } from 'react-router-dom'

function asyncComponent(getComponent) {
  return class AsyncComponent extends React.Component {
    static Component = null;
    state = { Component: AsyncComponent.Component };

    componentWillMount() {
      if (!this.state.Component) {
        getComponent().then(Component => {
          AsyncComponent.Component = Component
          this.setState({ Component })
        })
      }
    }
    render() {
      const { Component } = this.state
      if (Component) {
        return <Component {...this.props} />
      }
      return null
    }
  }
}

const Page1 = asyncComponent(() =>
  System.import('./Page1.js').then(module => module.default)
)
const Page2 = asyncComponent(() =>
  System.import('./Page2.js').then(module => module.default)
)
const Page3 = asyncComponent(() =>
  System.import('./Page3.js').then(module => module.default)
)

const ParentComponent = () => (
  <div>
    <ul>
      <li>
      <Link to="/page1">Page1</Link>
      </li>
      <li>
      <Link to="/page2">Page2</Link>
      </li>
      <li>
      <Link to="/page3">Page3</Link>
      </li>
    </ul>
    <div>
      <Route path="/page1" component={Page1}/>
      <Route path="/page2" component={Page2}/>
      <Route path="/page3" component={Page3}/>
    </div>
  </div>
)
5
Devarsh Shah