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é:
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.
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
ouDialog
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).
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>
);
}
Vous devez rendre les enfants dans ControlPanel
const ControlPanel = ({ children }) => {
return (
<div className="control_panel" id="control_panel">
{children}
</div>
);
}
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).