如何使用 react-native-render-html 获取具有特定 class 的 <span>

Question

我有一个特定的 <span> 需要自定义渲染

<p><span class="ql-formula" data-value="(x^2 + 4)(x^2 - 4)"></span></p>

因此，如果我的 span 标签具有 class ql 公式，我想使用 this library, else the span tag should default render. How can i grab that specific span tag using this library. For example similar behaviour can be achieved with this 库中的 MathText 按以下方式呈现它，

const renderNode = (node, index) => {
  if (
    node.name == 'span' &&
    node.attribs.class == 'ql-formula' &&
    node.attribs['data-value']
  ) {
    return (
      <MathText
        key={index}
        value={`$$${node.attribs['data-value']}$$`}
        direction="ltr"
        CellRenderComponent={props => <MathView {...props} />}
      />
    );
  }
};



<HTMLView value={htmlContent} renderNode={renderNode} />

但我不能使用这个库，因为它有一些其他限制

Answer 1

经过大量研发，我终于弄明白了。这是我的做法。

const renderers = {
  span: ({TDefaultRenderer, tnode, ...props}) => {
    const a = tnode.domNode.attribs;
    if (a.class == 'ql-formula') {
      return (
        <MathText
          key={Math.random()}
          value={`$$${a['data-value']}$$`}
          direction="ltr"
          CellRenderComponent={prop => <MathView {...prop} />}
        />
      );
    }
    return <TDefaultRenderer tnode={tnode} {...props} />;
  },
};

const App = () => {
  const {width} = useWindowDimensions();
  return (
    <View style={{flex: 1, backgroundColor: '#fcc', marginTop: 50}}>
      <RenderHtml contentWidth={width} source={source} renderers={renderers} />
    </View>
  );
};

如何使用 react-native-render-html 获取具有特定 class 的 <span>

How to grab a <span> with a particular class using react-native-render-html

html

javascript

react-native

react-native-render-html