如何解决如何在反应中将变量的值共享给另一个组件?
如何将变量传递给不同的组件?我在 VariableWithData
组件中有一个钩子,然后在单击按钮时乘以状态。如何将变量 multiplied
的数据传输到组件 NeedVariableData
上,以便可以在 <h1>
标签上显示值?
//src/app.js
export const app = () => {
return (
<div>
<VariableWithData />
<NeedVariableData />
</div>
)
}
// src/components/VariableWithData.js
import { useState } from "react"
export const VariableWithData = () => {
const [state,setState] = useState(2)
function multiplyData(){
const multiplied = state * 2;
}
return (
<div>
<input type="submit" onClick={multiplyData}/>
</div>
)
}
// src/components/NeedVariableData.js
export const NeedVariableData = () => {
return (
<div>
<h1>{multiplyData}</h1>
</div>
)
}
解决方法
import { useState } from "react"
export const App = () => {
const [count,setCount] = useState(2);
const handleClick = {
setCount(c => c * 2);
}
return (
<div>
<VariableWithData onClick={handleClick} />
<NeedVariableData multiplyData={count} />
</div>
)
}
// src/components/VariableWithData.js
export const VariableWithData = ({ onClick }) => {
return (
<div>
<button onClick={onClick}/>
</div>
)
}
// src/components/NeedVariableData.js
export const NeedVariableData = ({ multiplyData }) => {
return (
<div>
<h1>{multiplyData}</h1>
</div>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。