Intenté representar algún elemento usando accesorios, pero muestra cadenas que están ahí para completar los accesorios.
function Welcome(props){ const element = <p> <h3>Hello {props.name}</h3> <h3>My car Brand is {props.brand}</h3> </p> return element } function Greet() { const brand = "Ford"; const welcome = <div> <Welcome name="World" /> <Welcome brand={brand} /> </div> return welcome; }La salida viene así..
¡¡Hola Mundo!! La marca de mi auto es
Hola !!
La marca de mi auto es Ford
pero lo queria como
Hello World!! My car Brand is Fordno necesita enviar la marca explícitamente en otra función, puede hacerlo así:
function Greet() { const brand = "Ford"; const welcome = <div> <Welcome name="World" brand={brand}/> </div> return welcome; } y también puedes devolver jsx directamente
function Welcome(props) { return ( <p> <h3>Hello {props.name}</h3> <h3>My car Brand is {props.brand}</h3> </p> ); } function Greet() { const brand = 'Ford'; return ( <div> <Welcome name='World' /> <Welcome brand={brand} /> </div> ); }que la forma real de hacerlo
Obtiene ese resultado porque está llamando a su componente "Bienvenido" dos veces, una con la propiedad "nombre" y otra con la propiedad de marca, por lo que el primer renderizado es: "¡¡Hola mundo!! La marca de mi auto es [indefinido porque no envió la propiedad de la marca] ' y la segunda representación es: '¡Hola! [indefinido porque no envió la propiedad de nombre] La marca de mi automóvil es Ford, los valores indefinidos se representan como espacios en blanco, para obtener el resultado que espera, solo debe llamar a su componente "Bienvenido" una vez con ambas propiedades de esta manera:
<Welcome name={"World "} brand={brand}/>Espero que te haya ayudado, y es mejor enviar JSX directamente.