时间戳

首页 > 解决方案 > 如何从 react-native-render-html 中删除标签？

react-native - 如何从 react-native-render-html 中删除标签？

问题描述

如何删除h2只有标签的<br>标签？

<h2><br></h2>

标签： react-nativeexporeact-native-render-html

解决方案

你可以使用alterChildrenprop 删除一些 DOM 节点：

const html = `
<body>
<h2>Hello world</h2>
<p>Lorem ipsum</p>
<h2><br></h2>
</body>
`;

function hasOnlyBrChildren(node) {
  return node.children.every(
    (child) => child.type === 'tag' && child.name === 'br'
  );
}

function alterChildren(node) {
  return node.children.filter(
    (child) =>
      child.type !== 'tag' ||
      !(child.name === 'h2' && hasOnlyBrChildren(child))
  );
}

export default function App() {
  return (
    <ScrollView>
      <HTML alterChildren={alterChildren} html={html} />
    </ScrollView>
  );
}

我这里做了点心（我只是替换br为div直观评估功能的有效性）：https ://snack.expo.io/@jsamr/rnrhtml-alter-children

推荐阅读