如何解决将函数传递给危险的 SetInnerHTML 中的按钮不起作用
当在 react 中发现模式时,我试图在文本之间添加一个按钮标签,这是在危险的 SetInnerHTML 属性内完成的。 onClick 仅适用于 alert() 和 console.log(),当我向它传递函数时它不起作用。我错过了什么?
export const detectHashTagPattern = (text) => {
if(!text) return '';
let pattern = /This is a follow-up to your prevIoUs request #[0-9]+/gi;
let hashTagPattern = /#[0-9]+/;
text = text.replace(pattern,(res) => {
return res.replace(hashTagPattern,`<button onClick={}>${hashTagPattern.exec(res)}</button>`);
});
return text;
};
解决方法
好吧,您可以像下面这样更改算法:
function clickHandler() {
console.log("do something");
}
window.clickHandler = clickHandler;
export const detectHashTagPattern = (text) => {
if (!text) return "";
let pattern = /This is a follow-up to your previous request #[0-9]+/gi;
let hashTagPattern = /#[0-9]+/;
text = text.replace(pattern,(res) => {
return res.replace(
hashTagPattern,// use window.<fct>()
`<button onClick="window.${window.clickHandler.name}()">${hashTagPattern.exec(
res
)}</button>`
);
});
return text;
};
您不应该采用这种方法,因为它可能在您的应用程序中存在其他渲染问题(取决于您在处理程序中执行的操作)。
更好的方法是这样的:
const splitSubject = (text) => {
if (!text) {
return [""];
}
let pattern = /This is a follow-up to your previous request #[0-9]+/gi;
if (!pattern.test(text)) {
return [text];
}
let hashTagPattern = /#[0-9]+/;
let result = text.search(hashTagPattern);
return [text.slice(0,result),text.slice(result),text.slice(result + 1)];
};
const Subject = ({ subject,handler }) => {
const splitted = splitSubject(subject);
let content = null;
if (splitted.length === 1) {
content = <span>{splitted[0]}</span>;
} else {
let [info,cmd,reqReference] = splitted;
content = (
<>
<span>{info}</span>
<button onClick={() => handler?.(reqReference)}>{cmd}</button>
</>
);
}
return <p>{content}</p>;
};
export default function App() {
const requestHandler = (num) => {
console.log(`click on '${num}'`);
};
return (
<div>
<Subject
handler={requestHandler}
subject="This is a follow-up to your previous request #9"
/>
<Subject handler={requestHandler} subject="Not matching subject" />
</div>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。