So verwenden Sie React-Slots

// 015 importiere React von „react“ unter Verwendung von Slots;
importiere ReactDOM von „react-dom“;
// Übergeordnete Komponentenklasse ParentDom erweitert React.Component {
    Konstruktor(Requisiten) {
        super(Requisiten)
        dieser.Zustand = {
            heardData: "Headerdaten",
            footData: "Bodendaten",
            contentData: "Inhaltsdaten"
        }
    }
    componentDidMount() {
    }

    rendern() {
        zurückkehren (
            <div>
                <h1>015Slots verwenden</h1>
                <Kinderdom>
                    <div data-position="heard" >Dies ist die Kopfzeile</div>
                    <div data-position="content" >Dies ist der Inhalt丨{this.state.contentData}</div>
                    <div data-position="foot" >Das ist die Unterseite</div>
                </ChildDom>
            </div>
        )
    }
}
// Untergeordnete Komponentenklasse ChildDom erweitert React.Component {        
    Konstruktor(Requisiten) {
        super(Requisiten)  
    }
    rendern() {
        lass gehört werden, Inhalt, Fuß;
        diese.Requisiten.Kinder.fürJedes(Element =>{
            wenn(item.props['data-position'] == 'gehört'){
                gehört = Artikel
            }sonst wenn(item.props['data-position'] == 'content'){
                Inhalt = Artikel
            }sonst wenn(item.props['data-position'] == 'foot'){
                Fuß = Artikel
            }
        })  
        zurückkehren (
            <div >
                <p>Ich bin eine Unterkomponente</p>
               <div Klassenname="gehört">
                   {gehört}
               </div>
               <div Klassenname="Inhalt">
                   {Inhalt}
               </div>
               <div Klassenname="Fuß">
                   {Fuß}
               </div>
            </div>
        )
    }
}

Standardfunktion exportieren () {
    ReactDOM.render(
        <ParentDom />,
        document.querySelector("#beispiel15")
    );
}

importiere React, {Komponente} von 'react'
NavBar aus „./NavBar“ importieren
importiere NavBar2 aus './NavBar2'

exportiere Standardklasse App erweitert Komponente {
  rendern() {
    zurückkehren (
      <div>
        <Navigationsleiste>
          <span>aaa</span>
          <strong>bbb</strong>
          <a href="/#" rel="externes Nofollow" rel="externes Nofollow" >ccc</a>
        </NavBar>

        <NavBar2 linker Steckplatz={<span>aaa</span>}
        Mittelschlitz={<strong>bbb</strong>}
        Rechteslot={<a href="/#" rel="external nofollow" rel="external nofollow" >ccc</a>}/>
      </div>
    )
  }
}

importiere React, {Komponente} von 'react'

importiere './style.css'
exportiere Standardklasse NavBar erweitert Komponente {
  rendern () {
    zurückkehren (
      <div Klassenname="Navigationsleiste">
        <div Klassenname="nav-links">
          {diese.props.children[0]}
        </div>
        <div Klassenname="Navigationszentrum">
          {diese.props.children[1]}
        </div>
        <div Klassenname="nav-rechts">
          {this.props.children[2]}
        </div>
      </div>
    )
  }
}

importiere React, {Komponente} von 'react'

importiere './style.css'
exportiere Standardklasse NavBar erweitert Komponente {
  rendern () {
    const {leftslot, centerslot,rightslot} = this.props
    zurückkehren (
      <div Klassenname="Navigationsleiste">
        <div Klassenname="nav-links">
          {linker Slot}
        </div>
        <div Klassenname="Navigationszentrum">
          {Mittelschlitz}
        </div>
        <div Klassenname="nav-rechts">
          {Rechtslot}
        </div>
      </div>
    )
  }
}