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

Question

我正在尝试在 React 钩子内单击按钮时打印一个字符串。

这个名为"更多信息"的按钮位于我创建的钩子的返回标签内。(JSX) 单击此按钮时，它会调用另一个名为"ChangeName"的函数组件，该组件应打印一个字符串。

我不确定我是否写了一些错误的语法或遗漏了什么？控制台.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>)
}

Answer 1

tt 不相关的反应钩子，如果你想打印按钮上面的字符串，你应该让状态使用来自反应钩子的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>
</>
)
}