如何使用 react-markdown 在 reactjs 中渲染按钮 onClick function

Question

您好，我正在尝试提醒 react-markdown 中的按钮。 这是下面的代码：

import React, {useState, useEffect} from "react";
import {useNavigate} from "react-router-dom";
import '../App.css';
import ReactMarkdown from "react-markdown";
import remarkGfm from 'remark-gfm'
import rehypeRaw from "rehype-raw"



function App() {

  const navigate=useNavigate()

  const handleClick=(e)=>{
    alert("Hello")
    e.preventDefault()
  }
  
    
  const source = `

  # Plugin

  <button onClick=${handleClick}> Click Me </button>
  
  `

  return (
    <div className="App">
      
      <ReactMarkdown children={source} rehypePlugins={[rehypeRaw]} remarkPlugins={[remarkGfm]} />
        
    </div>
  );
}


export default App 

在访问了 url 之后，我得到了这样的结果

<button onClick=e => { alert("Hello"); e.preventDefault(); }> Click Me
 

或警报按钮不断弹出。

有人请帮忙。

Answer 1

请尝试这种方法

 <button onClick={(e)=>{alert('I am Alert')}> Click Me </button>