这和你可能在组件中做的任何其他更改一样：你通过状态（你喜欢的任何类型的状态机制）来做。按钮设置状态，告诉你的组件它应该呈现新按钮。状态成员可以是一个简单的标志，或者如果你想创建多个按钮，可以是一个数组，等等。
下面是一个使用useState的简单示例，但如果您使用其他状态机制，则基本上是相同的：

const { useState } = React;

const Example = () => {
    const [buttonClicked, setButtonClicked] = useState(false);

    const handleMainClick = () => {
        // Here I'm toggling on click, but you could just set it, or add to an
        // array, or...
        setButtonClicked((flag) => !flag);
    };
    const handleNewButtonClick = () => {
        console.log("New button clicked");
    };
    return (
        <div>
            <input type="button" value="Click Me" onClick={handleMainClick} />
            {buttonClicked && (
                <input
                    type="button"
                    value="New Button"
                    onClick={handleNewButtonClick}
                />
            )}
        </div>
    );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);

个字符
或者一个按钮数组：

const { useState } = React;

const Example = () => {
    const [buttons, setButtons] = useState([]);

    const handleMainClick = () => {
        // Here I'm toggling on click, but you could just set it, or add to an
        // array, or...
        setButtons((buttons) => [...buttons, `Button #${buttons.length + 1}`]);
    };
    const handleNewButtonClick = ({ currentTarget: { value } }) => {
        console.log(`${value} clicked`);
    };
    return (
        <div>
            <input type="button" value="Click Me" onClick={handleMainClick} />
            {buttons.map((button) => (
                <input
                    key={button}
                    type="button"
                    value={button}
                    onClick={handleNewButtonClick}
                />
            ))}
        </div>
    );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

的字符串

你所需要的只是一个状态来管理是否显示新按钮的条件。最初状态的值是false（正如你所描述的，它应该只在点击后显示）。然后你只需要在点击按钮事件时改变状态。
下面是这样做的代码：

import React, { useState } from "react";
import ReactDOM from "react-dom";

function App() {
  const [showNewButtonState, setShowNewButtonState] = useState(false);

  const onClickOriginalButton = () => {
    setShowNewButtonState(() => true);
  }

  return (
    <>
      <button onClick={onClickOriginalButton}>ORIGINAL</button>
      {showNewButtonState && (
        <button>NEW</button>
      )}
    </>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

字符串

用按钮对象列表创建一个状态。每次单击按钮时，都向状态中添加一个按钮。
接下来，将按钮Map到按钮元素。

const [buttons, setButtons] = useState([]);

const onClickhandler = (caption, onClick) => {   
    SetButton(prevButtons => [...prevButtons, { caption, onClick }] 
}

const buttonElements = buttons.map(button => <button onClick={button.onClick}>{button.caption}>

...etc

字符串
接下来你所要做的就是输出你原来的按钮，点击调用函数，为新按钮提供标题和点击动作！

你可以创建一个像displayCreatedButton这样的状态，在你的条件下//如何在这里创建一个新的按钮？你可以setDisplayCreatedButton(true)
然后在组件中有条件地呈现它。
全样本

export const SampleComponent = () => {
  const [displayCreatedButton, setDisplayCreatedButton] = useState(false)
  const addRelay = (e: React.MouseEvent) => {
     e.preventDefault();
     // call backend addRelay
     if (relayname !== '') {
        console.log('Relay Name: ' + relayname);
        setRelayName('');
        setDisplayButton(true)
     }
  };
    return (
    <>
       {displayCreatedButton && <Button>Hi</Button>}
       <ARButton onClick={addRelay}>Add Relay</ARButton>
    </>
    )

}

字符串