我应该使用useRef还是lift state up来处理以下情况

Question

在某些情况下，我必须在父组件中发送请求，而param是子组件的状态。我可以这样做吗？

function Parent() {
const paramRef = useRef(null)
return <Modal onConfirm={()=>{request(paramRef.current)}}>
<Child bindParam = {(param) => paramRef.current = param} />
</Modal>
}
function Child({bindParam}) {
const [state, setState] = useState('foo')
useEffect(()=>{
bindParam(state)
}, [state, bindParam])

return ...
}

否则我必须提升Child的状态。抱歉我英语不好。我把问题说清楚了吗？

Answer 1

请移动您的状态"useState(("并将其作为道具传递给子组件。

function Parent() {
const [state, setState] = useState('foo')
return <Modal onConfirm={()=>{request(paramRef.current)}}>
<Child state={state}  setState={setState}/>
</Modal>
}
function Child({state, setState}) {

useEffect(()=>{ 
setState('foo1');
}, [])

return ...
}

现在，您应该能够更改父级或子级的状态，但需要注意状态更改将重新呈现组件。