用 JS 函数替换 href 链接

Question

在我的 react electron 应用程序中，它使用 API，我接收 JSON 值以将数据显示到组件中。所以例如我有一个Features 组件：

const Features = () => {
  const { title } = useSelector(({ titles }) => titles);
  let string = title.features;
  // the string can contain some html tags. Example bellow:
  // sting = 'This is a string containing a href to <a href="www.google.com">Google</a>';

  string = string.replace(/href="(.*?)"/g, function() {
    return `onClick="${() => shell.openExternal('www.google.com')}"`;
  });

  return (
    <>
      <Heading>Features</Heading>
      <Text content={parsedHTML} />
    </>
  );
};

我想要的是用onClick 替换href 属性并分配Electron 的shell.openExternal() 函数。

string.replace() 回调函数会执行此操作，但是当我单击 <a> 元素时，应用会抛出下一个错误：

error: uncaughtException: 预期 onClick 监听器是 函数，取而代之的是 string 类型的值。

更新

也试过这个逻辑，出现同样的错误：

  global.openInBrowser = openInBrowser; // openInBrowser is basically a function that calls shell.openExternal(url)

  const re = new RegExp('<a([^>]* )href="([^"]+)"', 'g');
  string = string.replace(re, '<a$1href="#" onClick="openInBrowser(\'$2\')"');

这是Sandboxrep 的链接。

我该如何正确地做到这一点？

Answer 1

未在 React 元素上设置 onclick 实际上是预期行为。

因为在评估 onclick 字符串时存在 XSS 安全风险。推荐的解决方案是在html-react-parser 中使用replace 选项。

您也可以使用dangerouslySetInnerHTML，这涉及安全风险。

Sandbox Demo

export default function App() {
  let string =
    'This is a string containing html link to <a href="www.google.com">Google</a>';

  const re = new RegExp('<a([^>]* )href="([^"]+)"', "g");
  let replaced = string.replace(re, "<a onclick=\"alert('$2')\"");

  return (
    <div className="App">
      <p dangerouslySetInnerHTML={{__html: replaced}}></p>
      <p>{parse(string, {
        replace: domNode => {
          if (domNode.name === 'a') {
            let href = domNode.attribs.href
            domNode.attribs.onClick = () => { alert(href) }
            delete domNode.attribs.href
          }
        }
      })}</p>
    </div>
  );
}

Answer 2

不确定电子的细节，但如果窗口范围内没有可用的 functionName 变量，则在 html 中传递 (function(){functionName()})() 将不起作用。在电子中有一个全球环境，这可能会回答您的问题：

const Features = () => {
  const { title } = useSelector(({ titles }) => titles);
  let string = title.features;
  // the string can contain some html tags. Example bellow:
  // sting = 'This is a string containing a href to <a href="www.google.com">Google</a>';
  
  function runOpen(href){
      shell.openExternal(href)
  }      

  global.runOpen = runOpen;

  string = string.replace(/href="(.*?)"/g, function() {
    return `onClick="runOpen(${'www.google.com'})"`;
  });

  return (
    <>
      <Heading>Features</Heading>
      <Text content={parsedHTML} />
    </>
  );
};

如果没有，您可以使用 onclick="console.log(this)" 之类的东西来找出 onclick 运行的范围，然后在那里分配您的 runOpen 变量。