(Lo siento si es una pregunta de novato, acabo de empezar a usar React durante una semana y no encontré la respuesta a esta pregunta en Internet).
Tengo un componente React con dos propiedades que representa una de estas propiedades en el cuerpo de texto de <p>
function Item({ value, text }) { return ( <div> {/* not relevant code here */} <p>{text}</p> <div> ); }Y lo estoy usando con este código:
<Item text="Foo" value="foo"/> <Item text="Bar" value="bar"/> <Item text="Baz" value="baz"/>Pero quiero usarlo así:
<Item value="foo">Foo</Item> <Item value="bar">Bar</Item> <Item value="baz">Baz</Item> Entonces, ¿cómo puedo acceder al cuerpo del elemento React Item y cómo pasarlo a las propiedades?
Mi explicación simple de lo que hace props.children es que se usa para mostrar lo que incluye entre las etiquetas de apertura y cierre al invocar un componente.
cambie su componente de función a
function Item(props) { return ( <div> {props.children} <div> ); }Referencia: accesorios de react para niños.
@Kirill Espero que esto te ayude 😇.
function Item({ value, children }) { return ( <div> {/* not relevant code here */} {children} <div> ); }Entonces puedes llamar a tu artículo así:
<Item value="foo">Foo</Item> <Item value="bar">Bar</Item> <Item value="baz">Baz</Item>también puede pasar otro elemento como elementos secundarios a su Componente de artículo también:
<Item value="foo"> <p>Foo</p> </Item>Supongo que esto debería funcionar.
function Item({ value, children }) { return ( <div> {/* not relevant code here */} <p>{children}</p> <div> ); }