如何在react js中获取文本值或锚标记值

Question

我正在创建一个列表。但是如果我想显示那些从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>;
}

注意:在使用map进行迭代时，有一个初始过滤数据的解决方案。但是我不想用这个解决方案

我们可以在这里添加条件如果子锚标签有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

Answer 1

就像这样

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

Answer 2

因为子元素是反应元素，它们有props，您可以访问它。props可能也包含children，依此类推。特别针对您的用例，这将起作用(沙箱):

React.Children.forEach(children, (child) => {
const content = child.props?.children.props?.children;
if(typeof content === 'string' && content.startsWith('hello')) {
namesData.push(child);
}
});

然而，我不会走那条路。这似乎很脆弱，并且依赖于React决定为子对象建模的方式。一个更好的选择是过滤原始数组，只包含您希望呈现(sandbox)的项的数据:

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