web-dev-qa-db-fra.com

React balise de fermeture du composant

Je suis nouveau à React et j'essaie de comprendre le but/l'utilisation de <MyComponent> </MyComponent> vs <MyComponent />. Je n'arrive pas à trouver d'informations sur rien sauf les balises à fermeture automatique.

J'ai créé un défileur d'onglets de base en tant que JSFiddle en utilisant la fermeture automatique <MyComponent /> et les accessoires suivants, et je me demande s'il y a une meilleure façon d'écrire React que ce que j'ai fait.

class TabScroller extends React.Component {

  render() {
    return (
      <div className="tabScroller">
        <div className="NavList">
          <TabNav handleClick={this.handleNavClick} />
          <TabList 
            tabs={this.state.tabs} 
            activeTab={this.state.activeTab}
            scrollPosition={this.state.scrollPosition} 
            handleClick={this.handleTabClick}
          />
        </div>
        <TabContent content={this.state.tabs[this.state.activeTab].content} />
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <TabScroller />,
  document.getElementById('root')
);
javascriptreactjscomponents
10
Chimera.Zen

Dans JSX de React, vous n'avez besoin d'écrire <MyComponent></MyComponent> Que lorsque le composant a des composants enfants, comme ceci:

<MyComponent>
    <Child />
    <Child />
    <Child />
</MyComponent>

S'il n'y a rien entre <MyComponent> Et </MyComponent>, Alors vous pouvez l'écrire soit <MyComponent/> Soit <MyComponent></MyComponent> (Mais <MyComponent/> Est généralement préféré) . Détails dans Présentation de JSX .

Juste comme note latérale, vous accéderiez à ces enfants dans votre composant via la propriété spéciale props.children. Plus en JSX en profondeur: les enfants en JSX .

Notez que c'est très bien pas comme HTML ou XHTML. C'est sa propre chose (similaire) avec des règles différentes. Par exemple, en HTML, <div/> Est exactement la même chose que <div>: Une balise start, pour laquelle vous devez éventuellement avoir une balise de fin. Pas si JSX (ou XHTML). Les règles pour HTML sont que éléments vides (éléments qui n'ont jamais de contenu de balisage, tels que br ou img) peuvent être écrits avec ou sans / Avant > Et ils n'obtiennent jamais de balise de fin, mais les éléments non vides (comme div) doivent toujours avoir une balise de fin (</div>), Ils ne peuvent pas être à fermeture automatique. En JSX (et XHTML), ils peuvent l'être.

17
T.J. Crowder

Le but des balises à fermeture automatique est simplement qu'elles sont plus compactes. Cela est particulièrement utile lorsque ledit composant n'a pas d'enfants que vous entourez généralement d'un parent.

Donc, généralement pour les composants feuille (c'est-à-dire les composants qui n'ont pas d'enfants), vous utilisez la syntaxe à fermeture automatique. Comme: <Component />. Et même s'il a des accessoires, vous pouvez faire: <Component foo="bar" />.

Cependant, n'oubliez pas que children est un accessoire, donc vous pourriez techniquement faire:

<Component children={<span>foo</span>} />

mais je le trouve moins lisible et je le déconseille (lire l'avertissement ci-dessous).

Pour résumer, ceux-ci sont équivalents:

  • <Component /> = <Component></Component>
  • <Component foo="bar" /> = <Component foo="bar"></Component>

  • <Component children={<span>foo</span>}></Component> =

    <Component><span>foo</span></Component>

Vous pouvez utiliser l'approche que vous préférez. Bien que la pratique consiste à utiliser la version raccourcie lorsqu'il n'y a pas d'enfants.

Clause de non-responsabilité: Bien que la définition de childen prop par sa valeur de clé d'objet fonctionne techniquement, le faire est fortement déconseillé car il perturbe l'API car il est destiné à être utilisé. N'utilisez cette version que si vous êtes sûr de ce que vous faites.

4
Chris