Estoy creando una lista, pero mi condición es si quiero mostrar esos elementos que comienzan desde hello , de lo contrario, todos los demás elementos se ignoran.
¿Puede decirme cómo saber cuál es el valor anchor text ?
aquí está mi código
<Tabs> {data.map((i, idx) => ( <li key={idx}> <a>{i}</a> </li> ))} </Tabs>mis pestañas.js
import React from "react"; export default function Tabs({ children }) { const names = () => { const namesData = []; React.Children.forEach(children, (child) => { console.log(child); // if (child?.textcontent?.indexOf("hello")) { // namesData.push(child); // } namesData.push(child); }); return { namesData }; }; const { namesData = [] } = names(); return <ul>{namesData.map((i) => i)}</ul>; }NOTA: hay una solución para filtrar los datos inicialmente mientras se realiza la iteración usando el mapa. Pero no quiero usar esta solución
¿Podemos agregar aquí la condición si la etiqueta de anclaje infantil tiene texto de hello , entonces solo presiono en la matriz?
React.Children.forEach(children, (child) => { console.log(child); // if (child?.textcontent?.indexOf("hello")) { // namesData.push(child); // } namesData.push(child); });código completo https://codesandbox.io/s/compassionate-goldberg-ey2lc?file=/src/tabs.js:0-460
Dado que los niños son elementos de reacción, tienen props a los que puede acceder. Los props también pueden contener children , y así sucesivamente. Específicamente para su caso de uso, esto funcionaría ( sandbox ):
React.Children.forEach(children, (child) => { const content = child.props?.children.props?.children; if(typeof content === 'string' && content.startsWith('hello')) { namesData.push(child); } });Sin embargo, yo no iría por ese camino. Esto parece ser frágil y depende de la forma en que React decide modelar a los niños. Una mejor opción sería filtrar la matriz original para incluir solo los datos de los elementos que desea representar ( sandbox ):
<Tabs> {data .filter(txt => txt.startsWith('hello')) .map((i, idx) => ( <li key={idx}> <a>{i}</a> </li> ))} </Tabs>Así
import React from "react"; export default function Tabs({ children }) { const names = () => { const namesData = []; React.Children.forEach(children, (child) => { if(child?.props?.children?.props?.children.startsWith('hello')) namesData.push(child); }); return { namesData }; }; const { namesData = [] } = names(); return <ul>{namesData.map((i) => i)}</ul>; }