Kann ein reagieren Komponente haben mehrere Bereiche für Kind Inhalt?

Sagen wir, ich habe eine einfache reagieren Komponente:

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>
    );
  }
});

Nehmen wir jetzt an, dass anstelle einer Fläche für jedes Kind-Komponenten, ich möchte zwei, etwa so:

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>
    );
  }
});

Ich weiß, dass ich verwenden könnte, Attribute, doch das wäre nicht sehr elegant, für einen großen Teil des html-Inhalts. Wie kann das getan werden, reagieren in einer Weise, die ähnlich ist, zum Beispiel, die benannte Blöcke in Schluck?

Beispiel von benannten Blöcken:

{% 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 %}

Sehen Sie, dass diese Blöcke können verwendet werden, indem Sie auf Ihren Namen, und damit zu 'Ertrag' in mehreren Bereichen von Inhalten. Ich bin der Hoffnung, dass es eine ähnlich elegante Weise reagieren, um dies zu tun, da es macht die Bauteile sehr zusammensetzbar.

Wenn Sie sagen, "ich weiß, ich könnte die Attribute" - meinst du props? Warum wäre das nicht elegant?
Ja, die Eigenschaften, die definiert sind in der tag -<ReactComponent property="a large amount of html here wouldn't be very maintainable" />.
Dein Beispiel von benannten Blöcken sieht aus wie Django, nicht einen Schluck?

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>
        );
      }
    });
```
- So eine Komponente kann grundsätzlich immer nur wickeln Sie eine Einheit? Keine Möglichkeit, Sie zu passieren mehrere Teile des Inhalts? Denn das würde bedeuten, dass ich ' ll haben eine Menge zu tun, sich durch die Komponenten, um herauszufinden, was Kind-Komponenten Sie bestehen, in der Erwägung, dass, wenn ich könnte, übergeben Sie eine beliebige Anzahl von content-Bereiche könnte ich theoretisch einen überblick über die gesamte Anordnung der Komponenten/html in einem einzelnen Bereich.
- überprüfen Sie die aktualisierte code
- Ah ok, das ist ein wenig näher an das, was ich suchte. Obwohl ich kann sehen, wie könnte dies verwirrend sein, da es keinen Hinweis darauf, welches Kind geht, wo (es sei denn, Sie kommentieren Sie es oder verwenden Sie deklarative Komponente Namen), und es ist sehr leicht versehentlich ändern der Reihenfolge. Die benannte Blöcke Schluck machen es sehr offensichtlich ist, welche Inhalte geht, wo. Ich denke mal, dass nicht ein äquivalent in reagieren? So etwas wie benannte Kinder, die statt der Injektion von array-index?
- überprüfen Sie den code, jetzt habe ich ein Schlüssel-zu-component-logo und navbar und jetzt kann ich die Schleife durch die Requisiten.Kinder zu finden, meine richtige
- Ah ok, ja das ist toll! Danke für die Antwort!
- viel sauberer Ansatz!
- Wie kommt es, ich bekomme "diese.Requisiten.Kinder.filter ist nicht eine Funktion" Fehler?
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>
        );
    }
}

das ist die richtige Lösung, auch reagieren die Dokumentation schlage vor, dieses Konzept facebook.github.io/react/docs/composition-vs-inheritance.html ist falsch, die Aussage über Do not use props to pass components as children "Props und Zusammensetzung geben Ihnen alle Flexibilität, die Sie brauchen, um zu einer Komponente anpassen, das Aussehen und Verhalten in einer expliziten und sichere Art und Weise. Denken Sie daran, dass die Komponenten annehmen können beliebige Requisiten, einschließlich der primitiven Werte, Reagieren die Elemente-oder Funktionen."
Das ist die richtige Lösung. Danke @ncubica für den link.
Wenn Sie Typoskript, dann ist diese Strategie (oder die Verwendung von render-props) ist mehr typesafe als die akzeptierte Antwort.

InformationsquelleAutor Kokovin Vladislav

Können Sie behandeln Requisiten wie die Kinder, denn technisch children ist nur eine weitere requisite. Es ist nichts falsch mit diesem Ansatz Reagieren Mitwirkenden selbst schlage vor, Sie tun, dass (Unterstützung für mehrere untergeordnete einfügepunkte).

Darüber hinaus, wenn Sie arbeiten in einem großen team von Ingenieuren, würde ich auch empfehlen, die Standardisierung, wie nennen Sie jene Requisiten sowie deren standard-Verhalten – Sie sind einfach nur Inhalte oder ein Rückruf kann man auch Argumente übergeben. reagieren-Platzhalter kann Ihnen dabei helfen. So, der code der Komponente kann beispielsweise so Aussehen:

//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>
    );
  }
}

Und dies ist, wie würden Sie einbetten, dass die Komponente

//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

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.