web-dev-qa-db-fra.com

Pourquoi mes composants React imbriqués ne sont-ils pas rendus?

J'ai un problème avec mon composant React. Les enfants imbriqués de mon composant ControlPanel ne semblent pas être en cours de rendu. Voici mon code:

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

J'ai les deux lignes suivantes en haut de ce fichier:

import ControlPanel from './components/control_panel';

import CustomerDisplay from './components/customer_display';

Et voici mon composant ControlPanel:

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

J'ai essayé:

  • Appel du composant en tant que balise HTML complète (ouverture et fermeture)
  • Imbrication du composant CustomerDisplay dans le composant ControlPanel (dans le fichier index.jsx de ControlPanel)

Je sais que le composant de nidification est possible. Je l'ai vu faire. Pour une raison quelconque, cela ne fonctionnera tout simplement pas pour moi.

javascriptreactjscreate-react-app
11
MddHtt13

Pour permettre aux composants de contenir des enfants et de les rendre correctement, vous devez utiliser this.props.children. Ceci est transmis à tous les composants avec enfants comme accessoire et contient les enfants du composant, comme expliqué dans la documentation React :

Endiguement

Certains composants ne connaissent pas leurs enfants à l'avance. Ceci est particulièrement courant pour des composants tels que Sidebar ou Dialog qui représentent des "boîtes" génériques.

Nous recommandons que ces composants utilisent le paramètre spécial children pour transmettre les éléments enfants directement à leur sortie:

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

Cela permet aux autres composants de leur transmettre des enfants arbitraires en imbriquant le fichier JSX.

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

Comme décrit dans la documentation, certains composants ne connaissent pas leurs enfants à l'avance. Il peut s'agir d'encapsuleurs génériques ou de boîtes de contenu dont le contenu varie, ce que votre ControlPanel est Ainsi, pour rendre les enfants de votre composant, vous devez rendre les enfants de la propriété children explicitement dans la méthode render du parent. Appliquez-le comme ceci à votre code:

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

Notez le rendu de props.children (pas this.props.children car il s’agit d’un composant de fonction).

13
Li357

Vous pouvez accéder aux éléments imbriqués via des accessoires. Donc, dans votre cas, faites ceci:

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

Vous devez rendre les enfants dans ControlPanel

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

Votre App.js (je comprends que ce soit votre index JSX) devrait être: 

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

Essayez d’ajouter export default avant class (dans tous vos composants).

0
JuMoGar