Necesito poner un componente dentro de otro en ReactJS...
Tengo un componente que se llama Fondo el cual utilizo como fondo de todas las paginas y funciona perfectamente:
import React, {Component} from 'react';
import './Styles.css';
class Fondo extends Component {
render() {
return (
<div className="Fondo">Esto es el fondo</div>
);
}
}
export default Fondo;
Y otro que se llama Monitor (Que es un bloque div el cual quiero posicionar dentro de Fondo) que al ponerlo luego de se ven los dos perfectamente... ahora, aquí viene el problema:
import React, {Component} from 'react';
import './Styles.css';
class Monitor extends Component {
render() {
return (
<div className="Monitor">Esto es el fondo</div>
);
};
}
export default Monitor;
Todo esto va dentro de una pagina llamada Display y necesito que Monitor se vea dentro de Fondo, cosa que no he logrado hasta ahora...
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router-dom';
import Fondo from '../../components/fondo';
import Monitor from '../../components/monitor';
import './Styles.css';
class Display extends Component {
render(){
return (
<div>
<Fondo > Dentro de esto </Fondo>
<Monitor> Quiero meter esto</Monitor>
</div>
);
}
}
export default Display;
/* Intenté hacer esto **<Fondo> <Monitor> </Monitor> </Fondo>** pero entiendo que no es la forma indicada de hacerlo, si pueden ayudarme les agradecería mucho, se vienen cosas grandes genios!!! */