Peut réagir un composant avons de multiples domaines de l'enfant contenu?

Disons que j'ai un simple réagir composant:

import React from 'react';
import styles from "./index.css";

export default React.createClass({
  render: function() {
    return (
      <header className={styles.root}>
        //area for child content
        {this.props.children}
      </header>
    );
  }
});

Maintenant, disons qu'au lieu d'une zone pour n'importe quel enfant de composants, je veux les deux, comme suit:

import React from 'react';
import styles from "./index.css";

export default React.createClass({
  render: function() {
    return (
      <header className={styles.root}>
        <div className={styles.logo}>
          //logo children here
        </div>
        <div>
          //navigation children here
        </div>
      </header>
    );
  }
});

Je sais que je pourrais utiliser des attributs, mais ce ne serait pas très élégant pour une grande partie du contenu html. Comment cela peut-il être fait de réagir d'une manière qui est similaire à l', par exemple, la nommé blocs dans gorgée?

Exemple de nommé blocs:

{% extends 'layout.html' %}

{% block title %}My Page{% endblock %}

{% block head %}
  {% parent %}
  <link rel="stylesheet" href="custom.css">
{% endblock %}

{% block content %}
<p>This is just an awesome page.</p>
{% endblock %}

Vous voyez que ces blocs peuvent être utilisés par référence à leur nom, et ainsi permettre à "rendement" de multiples domaines de contenu. Je suis en espérant qu'il y est un de la même façon élégante façon de réagir à ce faire, car il rend des composants très modulable.

Quand vous dites "je sais que je pourrais utiliser les attributs" - entendez-vous des accessoires? Pourquoi ce ne serait pas élégant?
Ouais, les propriétés qui sont définies dans la balise <ReactComponent property="a large amount of html here wouldn't be very maintainable" />.
Votre exemple de l'nommé blocs ressemble à Django, pas rasade?

InformationsquelleAutor | 2016-06-26

javascript reactjs

12
```
Make seperate components Donot use props to pass components as children.
something like this.
```
//header.js
```
import React from 'react';
import styles from "./index.css";

export default React.createClass({
  getComponent(key) {
     return this.props.children.filter( (comp) => {
             return comp.key === key;
     });
  }
  render: function() {
    return (
      <header className={styles.root}>
        <div className={styles.logo}>
          {this.getComponent('logo')}
        </div>
        <div>
         {this.getComponent('navbar'}

        </div>
      </header>
    );
  }
});
```
//app.js
```
export default React.createClass({
      render: function() {
        return (
          <Header>
            <Logo key="logo"/>
            <Navbar key="navbar"/>
          </Header>
        );
      }
    });
```
- Ainsi, un composant peut toujours, fondamentalement, seulement enrouler une seule entité? Pas de moyen de passer plusieurs pièces de contenu? Parce que ça voudrait dire que je vais avoir à faire beaucoup de fouiller à travers les composants de comprendre ce que les composants enfants, ils sont composés d', alors que si je pouvais passer une quantité arbitraire de zones de contenu je pourrais théoriquement avoir un aperçu de l'ensemble de la disposition des composants/html dans un seul domaine.
- vérifier la mise à jour du code
- Ah ok, c'est un peu plus proche de ce que je cherchais. Même si je peux voir comment cela pourrait être source de confusion car il n'y a aucune indication de l'enfant qui va où (sauf si vous avez des commentaires ou déclarative noms des composants), et il est très facile de changer accidentellement l'ordre. Le nom des blocs dans gorgée, il est très évident de contenu qui va où. Je suppose que ça n'a pas d'équivalent à réagir? Quelque chose comme nommé enfants au lieu de les injecter par index de tableau?
- vérifier le code maintenant, j'ai ajouté une touche de composant logo et la barre de navigation et maintenant je peut faire une boucle à travers les accessoires.les enfants à trouver mon approprié
- Ah ok, ouais c'est génial! Merci pour la réponse!
- beaucoup plus propre approche!
- Comment se fait-je obtenir "ce.accessoires de jeu.les enfants.le filtre n'est pas une fonction d'erreur"?
InformationsquelleAutor Piyush.kapoor

import React, { Component } from 'react';
import styles from "./index.css";
import Logo from "./components/Logo";
import Navbar from "./components/Logo";

class Comp extends Component {
    render(){
        return (
            <Header className={styles.root}
                top={Logo}
                right={Navbar}
                />
        );
    }
}

class  Header extends Component {
    render(){
        let {top,right} =this.props;
        return (
            <header className={styles.root}>
                <div className={styles.logo}>
                    {top && <top />}
                </div>
                <div>
                    {right && <right />}
                </div>
            </header>
        );
    }
}

c'est la bonne solution, même la réagir la documentation suggère d'adopter cette approche facebook.github.io/react/docs/composition-vs-inheritance.html c'est faux l'état sur le point de Do not use props to pass components as children "des Accessoires et de la composition vous donner toute la souplesse dont vous avez besoin pour personnaliser un composant de l'apparence et du comportement explicitement et de façon sécuritaire. Rappelez-vous que les composants peuvent accepter l'arbitraire des accessoires, y compris des valeurs primitives, de Réagir éléments ou fonctions."
C'est la bonne solution. Merci @ncubica pour le lien.
Si vous utilisez la Machine, alors cette stratégie (ou de l'usage de rendre les accessoires) est plus typesafe que l'on a accepté la réponse.

InformationsquelleAutor Kokovin Vladislav

Vous pouvez traiter des accessoires comme des enfants, parce que techniquement children est juste un autre pilier. Il n'y a rien de mal avec cette approche – Réagir contributeurs eux-mêmes vous suggérons de le faire (Support de multiples points d'insertion de l'enfant).

En outre, si vous travaillez dans une grande équipe d'ingénieurs, je dirais aussi standardisation de la façon dont vous le nom de ces accessoires ainsi que leur comportement standard – sont-ils simplement un contenu ou d'un rappel, vous pouvez passer des arguments à. réagir-des espaces réservés peut vous aider avec ça. Donc, le code de votre composant peut ressembler à ça:

//header.jsx
import React from 'react';
import withSlots from 'react-placeholders';

@withSlots('logo', 'navigation')
export default class Header extends React.Component {
  render() {
    return (
      <header className={styles.root}>
        <div className={styles.logo}>
          {this.props.header()}
        </div>
        <div>
          {this.props.navigation('home')}
        </div>
      </header>
    );
  }
}

Et c'est comment vous pouvez intégrer ce composant

//app.jsx
import Header from 'header.jsx'

export default class Header extends React.Component {
  render() {
    return (
      <Header
        logoSlot={<img src="logo.svg" />}
        navigationSlot={(currentPage) => { 
          return <a href="#" style={{ color: currentPage ? 'blue' : 'red' }}>Home</a>
        }}
      />
    );
  }
}

InformationsquelleAutor Vlad Tsvang

Vous devez vous connecter pour publier un commentaire.