Reactjs 在React钩子中单击按钮时返回字符串

我试图打印一个字符串时，按钮点击内部的反应挂钩

这个名为moreinfo的按钮位于我创建的钩子的返回标记中。JSX单击它时会调用另一个名为ChangeName的函数组件，该组件应打印字符串

我不确定我是否写了一些错误的语法或遗漏了什么？函数中的console.log会在日志中显示字符串，但div标记不会在控制台上打印字符串

创建了一个自定义挂钩，按钮位于其返回标记内

 <button onClick ={ChangeName}>More Info <button>

onclick应该调用并打印以下函数的结果

 function ChangeName(){ 
         console.log("This is a test") //works
          return (<div>"This is a test"</div>)
          }

---

Tt不是相关的react钩子，若你们想打印按钮上方的字符串，你们应该使用react钩子中的useState来创建一个状态

const SomeComp = () => {
   const [value, setValue] = useState("")
   const changeName = () => {
      setValue("some value changed")
   }
   return (
     <>
     {value.length > 0 && <div>{value}</div>}
     <button onClick={changeName}>Change Name</button>
     </>
   )
} 

---

嘿，我试图添加您共享的代码，但它仍然没有显示outputbasic结构，我的代码如下。函数数据{一些从API返回循环中提取列表的代码，用于在标记中显示列表。每个循环都有一个名为“更多信息”的按钮。单击此按钮将触发另一个名为“更改名称”的函数，该函数应显示详细信息。由于我的按钮单击不起作用，我正在尝试输出一个简单的字符串作为开始。一旦成功，我将l我能够传递一个对象以显示其详细信息。我在空白项目中尝试。你看到任何错误吗？你应该提供更多详细信息。我现在尝试在单击按钮时输出数据。在上面共享的链接中，而不是一个简单的字符串。我没有看到你想要显示的任何额外数据，但想法是当你单击按钮时显示更多信息，y您应该有一个状态作为数组，以包含要显示更多信息的项目的选定id。