我尝试使用客户端组件的状态变量,该组件接受组件A中用户的某些表单值,然后我需要在组件B中使用这些值,组件B是服务器组件,主要负责使用表单值查询.XML文件。
但是,假设我在app目录中有两个文件,分别名为A.tsx和B. tsx。如何访问B.tsx中的“aValues”?
A.tsx:
'use client'
import { useState } from "react"
const A = () => {
const [aValues, setAValues] = useState({
name: '',
phone: ''
});
return (
<div>A is a Client component</div>
)
}
export default A
字符串
B.tsx:
const B = () => {
return (
<div>B is a Server component and wants to display the aValues</div>
)
}
export default B
型
1.我尝试添加一个Link标记并使用useSearchParams将其导入到b中,但随后我还需要将组件B更改为客户端。
A.tsx:
<Link href={{ pathname: 'b', query: {aValues: JSON.stringify(aValues)}}}> B </Link>
型
B.tsx:
'use client'
import {useSearchParams} from 'next/navigation'
const B = () => {
const searchParams = useSearchParams()
const aValues = searchParams.get('aValues')
const result = JSON.parse(aValues)
<div>{result.name}</div>
}
export default B
型
1.我也尝试用Redux创建一个全局状态并使用它,但觉得它太复杂了,而且对于这个任务来说有点矫枉过正。
1.此外,我还尝试创建一个新的C.tsx并导入,只是为了将aValues作为B中的子对象传递,但仍然无法做到这一点。
C.tsx
import A from 'A'
import B from 'B'
const C = () => {
return (
<div>
<A>
<B name={aValues.name} phone={aValues.phone}/>
</A>
</div>
)
}
export default C
型
1条答案
按热度按时间euoag5mw1#
我不知道你想做什么,但如果你只是想显示从clientComponent A到B的值,为什么不直接导入B内部的客户端组件呢?
但是,如果您想在B中使用useState,那么无论如何B组件都需要是客户端
字符串
B服务器组件
型