如何从html中将参数传递给react中的函数？

<div id="root"></div>

<script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script>
  function MyComponent(props) {
    return <button onClick={props.handleClick}>{props.text}</button>;
  }

  function handleClick() {
    console.log("Button clicked!");
  }

  ReactDOM.render(
    <MyComponent handleClick={handleClick} text="Click me!" />,
    document.getElementById("root")
  );
</script>