Блог

Я создаю список.но мое условие, если я хочу показать те элементы, которые начинаются с hello другого, все остальные элементы игнорируются.

не могли бы вы, пожалуйста, сказать мне, как узнать, что такое anchor text ценность ?

вот мой код

  <Tabs>
      {data.map((i, idx) => (
        <li key={idx}>
          <a>{i}</a>
        </li>
      ))}
    </Tabs>
 

мой Tabs.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>;
}
 

ПРИМЕЧАНИЕ : существует одно решение для первоначальной фильтрации данных при выполнении итерации с использованием карты.но я не хочу использовать это решение

можем ли мы добавить сюда условие, если дочерний тег привязки содержит hello текст, то только я вставляю массив

  React.Children.forEach(children, (child) => {
          console.log(child);
          // if (child?.textcontent?.indexOf("hello")) {
          //   namesData.push(child);
          // }
          namesData.push(child);
        });
 

весь код
https://codesandbox.io/s/compassionate-goldberg-ey2lc?file=/src/tabs.js:0-460

Именно так

 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>;
} 

Поскольку дети являются элементами реакции, у них есть props , к которым вы можете получить доступ. props Мощь children также содержит и так далее. Специально для вашего случая использования это будет работать (песочница):

 React.Children.forEach(children, (child) => {
  const content = child.props?.children.props?.children;

  if(typeof content === 'string' amp;amp; content.startsWith('hello')) {
    namesData.push(child);
  }
});
 

Однако я бы так не поступил. Это кажется хрупким и зависит от того, как React решает моделировать детей. Лучшим вариантом было бы отфильтровать исходный массив, чтобы включить только данные для элементов, которые вы хотите отобразить (песочница).:

 <Tabs>
  {data
   .filter(txt => txt.startsWith('hello'))
   .map((i, idx) => (
    <li key={idx}>
      <a>{i}</a>
    </li>
  ))}
</Tabs>