React JS中获取锚标签文本值并筛选hello开头元素的实现方法

实现方法 #

可以在你标注的位置添加判断逻辑实现需求，注意React.Children.forEach遍历拿到的child是React虚拟DOM对象，不是原生DOM节点，不存在textContent属性，需要从虚拟DOM的props层级中提取锚文本：

你当前传入Tabs的子节点结构是li包裹a标签，锚文本直接存放在a标签的props.children中，修改后的判断逻辑如下：

React.Children.forEach(children, (child) => {
  // 先校验节点结构，避免异常报错
  if (child?.type === 'li' && child.props?.children?.type === 'a') {
    const anchorText = child.props.children.props.children
    // 仅保留以hello开头的锚文本对应的节点，如需不区分大小写可统一转小写后判断
    if (typeof anchorText === 'string' && anchorText.startsWith('hello')) {
      namesData.push(child)
    }
  }
})

如果你的业务场景后续可能出现a标签内嵌套其他元素（比如span包裹文本）的情况，可以额外加一段递归逻辑提取a标签内所有文本内容再做匹配即可。

内容的提问来源于stack exchange，提问作者user944513