在危险地设置为字符串的元素上不会触发onClick函数

Question

我不知道这是一个错误还是我做错了什么。

我有以下代码，锚点上的onClick不会触发：

const DangerousText = props => (
  <div
    dangerouslySetInnerHTML={{ // eslint-disable-line
      __html: props.translate(
        props.translationKey,
        {
          link:
            `<a
              href=${props.link}
              onClick="${(event) => { event.preventDefault(); props.history.push(props.link); }}"
            >
              ${props.linkTextTranslationKey ? props.translate(props.linkTextTranslationKey) : ''}
            </a>`,
          ...props.extraVariables,
        },
      ),
    }}
  />
);

类似地，如果我将onClick函数更新为立即调用的函数，如下所示：

onClick="${((event) => { event.preventDefault(); props.history.push(props.link); })(event)}"

然后，即使我没有单击锚点，此代码也会触发。