Como poner un componente dentro de otro en ReactJS

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!!! */

Hay alguna diferencia entre guardar data en firebase desde un componente hijo y hacerla desde un componente padre?

En mi código puedo caragar datos en firebase desde el componente padre, pero hago el mismo procedimiento desde un componente hijo y no funciona. Debo incluir ‘$ emit’ o algo así? No encuentro documentación al respecto y no encuentro el por qué no funciona.

¿Porque no se muestra el listado de compras en mi componente vue compras.vue, y los proveedores en v-select de proveedores?

Estimados en mi proyecto laravel que se llama Proyectolaravel tengo un componente en la carpeta /resources/js/components/compra.vue no muestra el listado de compras inoveedores en el incialmente, ni la lista de proveedores en el formulario de igreso de compras (que usado la herramienta vue select para el listado de proveedores vue select

Pantalla de Compras (listado de compras que no muestra) Componente compras.vue no muestra listado Componente compras.vue formulario

Componente compra.vue

(Presento solo del componente compra.vue la parte del listado y formulario) y metodos para obtener los proveedores

Para Listado

                   <h2>Listado de Compras</h2><br/>                      <button class="btn btn-primary btn-lg" type="button" @click="mostrarDetalle()">                         <i class="fa fa-plus fa-2x"></i>&nbsp;&nbsp;Nueva Compra                     </button>                 </div>                 <!--- Listado-->                  <div class="card-body">                     <div class="form-group row">                         <div class="col-md-6">                             <div class="input-group">                                 <select class="form-control col-md-3" v-model="criterio">                                   <option value="tipo_identificacion">Tipo identificación</option>                                   <option value="num_compra">Número Compra</option>                                   <option value="fecha_compra">Fecha Compra</option>                                 </select>                                 <input type="text"  @keyup.enter="listarCompra(1,buscar,criterio);" v-model="buscar" class="form-control" placeholder="Buscar texto">                                 <button type="submit"  @click="listarCompra(1,buscar,criterio);" class="btn btn-primary"><i class="fa fa-search"></i> Buscar</button>                             </div>                         </div>                     </div>                     <table class="table table-bordered table-striped table-sm">                         <thead>                             <tr class="bg-primary">                                      <th>Ver Detalle</th>                                     <th>Fecha Compra</th>                                     <th>Número Compra</th>                                     <th>Proveedor</th>                                     <th>Tipo de identificación</th>                                     <th>Comprador</th>                                       <th>Total (USD$  )</th>                                     <th>Impuesto</th>                                     <th>Estado</th>                                     <th>Cambiar estado</th>                                     <th>Descargar Reporte</th>                             </tr>                         </thead>                         <tbody>                              <tr v-for="compra in arrayCompra" :key="compra.id">                                      <td>                                          <!--compra.id-->                                         <button type="button" @click="verCompra(compra.id)" class="btn btn-warning btn-sm">                                         <i class="fa fa-eye fa-2x"></i> Ver detalle                                         </button> &nbsp;                                       </td>                                     <td v-text="compra.fecha_compra"></td>                                     <td v-text="compra.num_compra"></td>                                     <td v-text="compra.nombre"></td>                                     <td v-text="compra.tipo_identificacion"></td>                                      <td v-text="compra.usuario"></td>                                      <td v-text="compra.total"></td>                                     <td v-text="compra.impuesto"></td>                                     <td>                                           <button type="button" v-if="compra.estado=='Registrado'" class="btn btn-success btn-sm">                                             <i class="fa fa-check fa-2x"></i> Registrado                                         </button>                                          <button type="button" v-else class="btn btn-danger btn-sm">                                              <i class="fa fa-times fa-2x"></i> Anulado                                         </button>                                      </td>                                       <td>                                         <template v-if="compra.estado=='Registrado'">                                             <button type="button" class="btn btn-danger btn-sm" @click="desactivarCompra(compra.id)">                                                 <i class="fa fa-times fa-2x"></i> Anular Compra                                             </button>                                         </template>                                          <template v-else>                                             <button type="button" class="btn btn-danger btn-sm">                                                  <i class="fa fa-check fa-2x"></i> Cambiado                                             </button>                                         </template>                                     </td>                                      <td>                                           <button type="button" @click="pdfCompra(compra.id)" class="btn btn-info btn-sm">                                         <i class="fa fa-file fa-2x"></i> Descargar PDF                                         </button> &nbsp;                                     </td>                               </tr>                          </tbody>                     </table>                     <nav>                         <ul class="pagination">                             <li class="page-item" v-f="pagination.current_page > 1">                                 <a class="page-link" href="#" @click.prevent="cambiarPagina(pagination.current_page - 1,buscar,criterio)">Anterior</a>                             </li>                              <li class="page-item" v-for="page in pagesNumber" :key="page" :class="[page == isActived ? 'active' : '']">                                 <a class="page-link" href="#" @click.prevent="cambiarPagina(page,buscar,criterio)" v-text="page"></a>                             </li>                               <li class="page-item" v-if="pagination.current_page < pagination.last_page">                                 <a class="page-link" href="#" @click.prevent="cambiarPagina(pagination.current_page + 1,buscar,criterio)">Siguiente</a>                             </li>                         </ul>                     </nav>                 </div>                 </template> 

Para el formulario de ingreso de compras:

                <template v-else>                 <span><strong>(*) Campo obligatorio</strong></span><br/>                  <h3 class="text-center">Llena el formulario</h3>                  <div class="card-body">                       <div class="form-group row border">                         <div class="col-md-8">                             <div class="form-group">                               <label class="text-uppercase"><strong>Numero Compra(*)</strong></label>                               <input type="text" class="form-control" v-model="num_compra" placeholder="">                           </div>                         </div>                          <div class="col-md-8">                              <div class="form-group">                                 <label class="text-uppercase"><strong>Proveedor(*)</strong></label>                                 <v-select                                   :on-search="selectProveedor"                                   label="nombre"                                   :options="arrayProveedor"                                   placeholder="Buscar Proveedores..."                                   :onChange="getDatosProveedor"                                  >                                 </v-select>                             </div>                         </div>                          <div class="col-md-8">                              <div class="form-group">                                 <label class="text-uppercase"><strong>Tipo Identificacion(*)</strong></label>                                 <select class="form-control" v-model="tipo_identificacion">                                     <option value="0">Seleccione</option>                                     <option value="FACTURA">Factura</option>                                     <option value="NV">Nota_vta</option>                                     <option value="PROFORMA">Proforma</option>                                     <option value="TICKET">Ticket</option>                                 </select>                             </div>                         </div>                          <div class="col-md-8">                             <label class="text-uppercase"><strong>Impuesto(*)</strong></label>                             <input type="text" class="form-control" v-model="impuesto">                         </div>                          <div class="form-group row">                              <div class="col-md-12">                                 <div v-show="errorCompra" class="form-group row div-error">                                     <div v-for="error in errorMostrarMsjCompra" :key="error" v-text="error">                                      </div>                                 </div>                                </div>                         </div>                          <br/><br/>                          <div class="form-group row border">                             <div class="col-md-6">                                 <div class="form-group">                                     <label>Producto <span class="text-error" v-show="idproducto==0">(*Ingrese codigo)</span></label>                                     <div class="form-inline">                                         <input type="text" class="form-control" v-model="codigo" @keyup.enter="buscarProducto()" placeholder="Ingrese codigo">                                         <button @click="abrirModal()" class="btn btn-primary">                                              <i class="fa fa-plus"></i>&nbsp;Agregar Producto                                         </button>                                         <input type="text" readonly class="form-control" v-model="producto">                                                </div>                                 </div>                             </div>                             <div class="col-md-2">                                 <div class="form-group">                                     <label>Precio <span class="text-error" v-show="precio==0">(*precio)</span></label>                                     <input type="number" value="0" step="any" class="form-comtrol" v-model="precio">                                 </div>                               </div>                             <div class="col-md-2">                                 <div class="form-group">                                     <label>Cantidad <span class="text-error" v-show="cantidad==0">(*valor)</span></label>                                     <input type="number" value="0" step="any" class="form-control" v-model="precio">                                 </div>                             </div>                             <div class="col-md-2">                                 <div class="form-group">                                     <button @click="agregarDetalle()" class="btn btn-primary form-control btnagregar"><i class="fa fa-plus fa-2x"></i> Agregar detalle</button>                                 </div>                                 </div>                         </div>                           <br/><br/>                          <div class="form-group row border">                              <h3>Lista Compra a Proveedores</h3>                              <div class="table-responsive col-md-12">                                 <table class="table table-bordered table-striped table table-sm">                                     <thead>                                         <tr class="bg-success">                                             <th>Eliminar</th>                                             <th>Producto</th>                                             <th>Precio (USD$  )</th>                                             <th>Cantidad</th>                                             <th>Total (USD$  )</th>                                         </tr>                                     </thead>                                     <tbody v-if="arrayDetalle.length">                                         <tr v-for="(detalle,index) in arrayDetalle" :key="detalle.id">                                             <td>                                                 <button @click="eliminarDetalle(index)" type="button" class="btn btn-danger btn-sm">                                                     <i class="fa fa-times fa-2x"></i>                                                 </button>                                             </td>                                             <td v-text="detalle.producto">                                             </td>                                             <td>                                                 <input v-model="detalle.precio" type="number" value="3" class="form-control">                                             </td>                                             <td>                                                 <input v-model="detalle.cantidad" type="number" value="2" class="form-control">                                             </td>                                             <td>                                                 {{detalle.precio*detalle.cantidad}}                                             </td>                                          </tr>                                         <tr style="background-color: grey;">                                             <td colspan="4" align="rigth"><strong>Sub-Total:</strong></td>                                             <td><strong> USD$   {{subTotal=((subTotal+(detalle.precio*detalle.cantidad))).toFixed(2)}}</strong></td>                                           </tr>                                         <tr style="background-color: grey;">                                             <td colspan="4" align="rigth"><strong>Impuesto:</strong></td>                                             <td><strong> USD$   {{subTotalImpuesto=(subTotal*impuesto).toFixed(2)}}</strong></td>                                           </tr>                                         <tr style="background-color: grey;">                                             <td colspan="4" align="rigth"><strong>Total:</strong></td>                                             <td><strong> USD$   {{total=calcularTotal}}</strong></td>                                           </tr>                                     </tbody>                                     <tbody v-else>                                         <tr>                                             <td colspan="5">                                                 No se ha agregado productos                                             </td>                                         </tr>                                     </tbody>                                 </table>                             </div>                         </div>                         <div class="form-group row">                             <div class="col-md-12">                                 <button type="button" class="btn btn-danger" @click="ocultarDetalle()"><i class="fa fa-times fa-2x"> Cerrar</i></button>                                 <button type="button" class="btn btn-success" @click="registrarCompra()"><i class="fa fa-save fa-2x"> Registrar Compra</i></button>                             </div>                         </div>                        </div>                       <!-- Fin Detalles -->                 </div>                 </template> 

Método del script para obtener listado que se llama listarCompras()

methods:{             listarCompra(page,buscar,criterio){                 let me=this;                 var url= 'http://localhost/proyectolaravel/public/compra?page=' + page + '&buscar='+ buscar + '&criterio='+criterio;                 axios.get(url).then(function (response) {                     // handle success                     //console.log(response);                     var respuesta = response.data;                     me.arrayCompra=respuesta.compras.data;                     me.pagination= respuesta.pagination;                 })                 .catch(function (error) {                     // handle error                     console.log(error);                 });            },          

Ahora métodos para Proveedores selectProveedor() y getDatosProveedor()

selectProveedor(search,loading){                let me=this;                loading(true)                 var url = 'http://localhost/proyectolaravel/public/proveedor/selectProveedor?filtro='+search;                axios.get(url).then(function (response) {                    let respuesta = response.data;                    q: search                    me.arrayProveedor=respuesta.proveedores;                    loading(false);                 })                .catch(function (erro){                    console.log(error);                });               },              getDatosProveedor(val1){                let me= this;                me.loading = true;                me.idproveedor = val1.id;                       },            

Su ayuda con esto que no muestra listado de compras y listado de proveedores

Pantalla de compra.vue que no muestra listado

Componente compra.vue no muestra listado

Componente compra.vue formulario de ingreso

Error que sale en el componente compra.vue Componente compra.vue error que sale

Error: El componente activex no puede crear el objeto (vba excel 2013)

Actualmente desarrollo en un complemento para excel en la empresa donde trabajo, este complemento debe realizar un ” DoCmd.TransferSpreadsheet ” desde excel a una base de datos access, cuando ejecuto el complemento en excel 2016 funciona perfectamente, el problema radica cuando lo ejecuto en excel 2013.

Error: El componente Activex no puede crear el objeto

Se que debe se un tema de librerias pero la verdad he buscado y no encuentro cual es la correcta.

Alguien puede ayudarme

Error al importar componente en Vue: This dependency was not found:

Intento importar un componente (Footer.vue) tan simplemente como lo he hecho con el componente TodoList.vue :

import Vue from 'vue' import Router from 'vue-router' import TodoList from '@/components/TodoList' import Footer from "@/component/Footer"  Vue.use(Router)  export default new Router({   routes: [     {       path: '/',       name: 'TodoList',       component: TodoList     },     {       path: "/",       name: "Footer",       component: Footer     }   ] })

Sin embargo me aparece el siguiente error (antes ya de añadirlo también en las routes de Router, pero no cambia nada al añadir la ruta):

This dependency was not found:  * @/component/Footer in ./src/router/index.js  To install it, you can run: npm install --save @/component/Footer

En el Footer.vue lo tengo de la misma manera que el otro que si se importa correctamente:

<script> export default {     name: "Footer" } </script>

Como llamar una funcion en el template del componente Angular

Estoy tratando de hacer mi primer componente en angular, he checho esto en el archivo .ts, pero no se como se hace para que el countdown aparezca en el template, me imagino que debo llamar la función que lo ejecuta en en dicho template pero no se como hacerlo………………………………… …………………………………………………………..

Gracias por su ayuda

import { Component, OnInit } from '@angular/core';  @Component({   selector: 'app-countdown',   templateUrl: './countdown.component.html',   styleUrls: ['./countdown.component.css'] }) export class CountdownComponent implements OnInit {   countDownDate: number;   now: number;   days: number;   hours: number;   minutes: number;   seconds: number;   distance: number;    constructor(countDownDate_:number) {      this.countDownDate = countDownDate_;   }    mi_funcion () {      let _self = this;       let x = setInterval(function():void{          _self.now = new Date().getTime();          let distance: number = _self.countDownDate - _self.now         let days:number = Math.floor(distance / (1000 * 60 * 60 * 24));         let hours:number = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));         let minutes:number = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));         let seconds:number = Math.floor((distance % (1000 * 60)) / 1000);          console.log( `Faltan:  $  {days} Dias, $  {hours} Horas,  $  {minutes} Minutos, $  {seconds} Segundos`);          if (distance < 0){             clearInterval(x);              console.log("El tiempo para preventa he terminado");         }      },1000);  }        ngOnInit() {   }  }  let countDownDate_:number = new Date ("Jan 5, 2021 15:37:25").getTime();  let instancia = new MyCountDown(countDownDate_); instancia.mi_funcion()  

//Html

<div class="row">     <div class="col-3">Dias: </div>     <div class="col-3">Horas: </div>     <div class="col-3">Minutos</div>     <div class="col-3">Segundos</div> </div> 

¿Para que usa una uri android al momento de tener que enviar una intent a un componente?

Estoy estudiando intents en android y tengo este código:

Uri webpage = Uri.parse("http://hermosaprogramacion.blogspot.com"); Intent webIntent = new Intent(Intent.ACTION_VIEW, webpage); startActivity(webIntent); 

Comprendo que lo que hará android es buscar las aplicaciones que tengan componentes que permitan la acción de tipo ACTION_VIEW y de esta manera desencadenar la acción.

  • ¿Como sabe android que lo que se quiere hacer es abrir una pagina web en x aplicación? haciendo uso de la uri?, ¿Como sabe android que es lo que quiere decir la uri?, ¿es decir como sabe que hacer con ella? cuando se va a comunicar con un componente mediante un intent

  • Por ejemplo si hay varias aplicaciones candidatas para hacer la
    acción lo que hace android es mandar un menú de opciones y la app que el usuario elija sera la que se designe para recibir el intent,
    entonces en ese proceso ya cuando se eligio el componente y todo ¿Que papel juega la uri y como la usa android? y en el caso del ejemplo que puse arriba ¿Como sabe que se quiere abrir una pagina web? ¿Como sabe que es lo que tiene que hacer con esa url?

Componente vue no se muestra

tengo un problema he implementado el Scroll Infinito en laravel con vue tengo ese componente que me carga la información y otro componente que me muestra otro botón para que me abra un modal.

pero lo que pasa es que cuando cargo por primera vez la pagina a veces si me cargan los componentes. pero si le doy de nuevo actualizar . Ya no cargan, es muy random a veces cargan a veces no.

introducir la descripción de la imagen aquí

supuestamente quize separar en dos el archivo app.js e hice el selt.js porque estaba demasiado BIG! pero aún así sigue saliendo que cuando hago npm production salen muy grandes.

en resumen ¿por que a veces no se muestran mis componentes hasta recargar varías veces la pagina? a veces a la primera aparecen.

Añadir contador de segundos a estado componente React

Estoy siguiendo un curso y parece que hay dos sistemas de modificar estados de un componente en React ya que hay los functional y los class components.

En el curso añaden un contador de segundos pero usan class components, pero necesitaria el ejemplo con functional component en este código.

Entiendo que debe ser muy sencillo pero no encuentro ejemplos de functional components, solamente de class components.

Muchas gracias!

import React from 'react'; import logo from './logo.svg'; import './App.css';  import Title from './components/Title';  function App() {   return (     <section>       <div>         <div>           <Title></Title>           <button>Lorem Ipsum</button>           <img src={process.env.PUBLIC_URL + './images/vlogo.jpg'} height= "300"/>           <div>             <ul>               <li>                 <h3>Lorem Ipsum</h3>                 <p>Lorem Ipsum</p>               </li>               <li>                 <h3>Lorem Ipsum</h3>                 <p>Lorem Ipsum</p>               </li>               <li>                 <h3>Lorem Ipsum</h3>                 <p>Lorem Ipsum</p>               </li>             </ul>           </div>         </div>       </div>     </section>   ); }  export default App;