web-dev-qa-db-de.com

Warum werden meine verschachtelten React-Komponenten nicht gerendert?

Ich habe ein Problem mit meiner React-Komponente. Die verschachtelten Kinder meiner Komponente ControlPanel scheinen nicht gerendert zu werden. Hier ist mein Code:

class App extends Component {
  render() {
    return (
      <div className="App">
        <ControlPanel>
          <CustomerDisplay />
        </ControlPanel>
      </div>
    );
  }
}

Ich habe die folgenden zwei Zeilen am Anfang dieser Datei:

import ControlPanel from './components/control_panel';

import CustomerDisplay from './components/customer_display';

Und hier ist meine ControlPanel Komponente:

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './styles.scss';

const ControlPanel = () => {
    return (
      <div className="control_panel" id="control_panel">

      </div>
    );
}

export default CSSModules(ControlPanel, styles);

Ich habe versucht:

  • Aufruf der Komponente als vollständiges HTML-Tag (Öffnen und Schließen)
  • Verschachteln der Komponente CustomerDisplay in der Komponente ControlPanel (in der Datei index.jsx der Variable ControlPanel)

Ich weiß, dass das Verschachteln von Komponenten möglich ist. Ich habe gesehen, wie es fertig ist. Aus irgendeinem Grund funktioniert es einfach nicht für mich.

javascriptreactjscreate-react-app
11
MddHtt13

Damit Komponenten untergeordnete Objekte enthalten und korrekt dargestellt werden können, müssen Sie this.props.children verwenden. Dies wird an alle Komponenten mit Kindern als Requisite weitergegeben und enthält die Kinder der Komponente, wie in der React-Dokumentation erläutert:

Eindämmung

Einige Komponenten kennen ihre Kinder nicht rechtzeitig. Dies ist besonders häufig bei Komponenten wie Sidebar oder Dialog, die generische "Boxen" darstellen.

Wir empfehlen, dass diese Komponenten die spezielle children-Eigenschaft verwenden, um untergeordnete Elemente direkt in ihre Ausgabe zu übergeben:

function FancyBorder(props) {
    return (
      <div className={'FancyBorder FancyBorder-' + props.color}>
        {props.children}
      </div>
    );
}

Dadurch können andere Komponenten durch Schachteln des JSX beliebige untergeordnete Elemente an sie übergeben

function WelcomeDialog() {
    return (
      <FancyBorder color="blue">
        <h1 className="Dialog-title">
          Welcome
        </h1>
        <p className="Dialog-message">
          Thank you for visiting our spacecraft!
        </p>
      </FancyBorder>
    );
}

Wie in der Dokumentation beschrieben, kennen einige Komponenten ihre Kinder nicht im Voraus. Es handelt sich möglicherweise um generische Wrapper oder um Inhaltskästen, die variieren. Dies ist Ihre ControlPanel. Um die untergeordneten Elemente Ihrer Komponente darzustellen, müssen Sie die untergeordneten Elemente der children-Komponente explizit in der render-Methode des übergeordneten Objekts darstellen. Wenden Sie es daher wie folgt auf Ihren Code an:

const ControlPanel = (props) => {
    return (
      <div className="control_panel" id="control_panel">
        {props.children}
      </div>
    );
}

Beachten Sie, wie props.children gerendert wird (nicht this.props.children, da es sich um eine Funktionskomponente handelt).

13
Li357

Sie können auf die verschachtelten Elemente über Requisiten zugreifen. Also in deinem Fall:

const ControlPanel = (props) => {
  return (
    <div className="control_panel" id="control_panel">
      {props.children}
    </div>
  );
}
0
kurumkan

Sie müssen die Kinder in ControlPanel rendern.

const ControlPanel = ({ children }) => {
    return (
      <div className="control_panel" id="control_panel">
        {children}
      </div>
    );
}
0
Michael Peyper

Ihre App.js (ich verstehe, dass es sich um Ihren JSX-Index handelt) sollte 

import React from 'react';
import ReactDOM from 'react-dom';

export default class App extends Component {
render() {
return (
  <div className="App">
    <ControlPanel>
      <CustomerDisplay />
    </ControlPanel>
  </div>
);
}
}


ReactDOM.render(<App/>, document.getElementById('YOUR_ROOT_ID'));

Versuchen Sie, export default vor class (in allen Ihren Komponenten) hinzuzufügen.

0
JuMoGar