如何使用<span> -native-<span>-html抓取具有特定类的呈现

Question

我有一个需要自定义呈现的特定<span>

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

因此，如果我的跨度标记有ql-formula类，我想使用this库中的MathText来呈现它，否则跨度标记应该默认呈现。如何使用this库获取特定跨度标记。例如可以通过以下方式利用this库来实现类似的行为，

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