检查另一个功能组件的状态

Question

我是新手，我想调用外部函数的状态，例如：

export default function Child() {          
const [succeeded, setSucceeded] = useState(false);
}

---

export default function Parent() {     
if(Child.succeeded){
// do the following
}
}

我知道props只用于const对象，我不想将两个函数合并到一个单一的函数中以保持有序，我想检查子函数的状态以进行下一步操作，或者回调具有新状态的父函数以通知它。有什么方法可以做到吗？非常感谢您抽出时间。

Answer 1

另一种方法是可以使用useRef，这在某些情况下非常方便。

import React, {useState} from "react";

export default function Child({nameRef}) {
const [name, setName] = useState('');
React.useEffect(() => {
nameRef.current = name;    
}, [name]);
return (
<>
<input nameRef={nameRef} type="text" onChange={event => setName(event.target.value)} />
</>
);
}
import React, { useState, useRef } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import Child from './Child';
function App() {
let [name, setName] = useState("Nate");
let nameRef = useRef();
const submitButton = () => {
console.log(nameRef.current);
};
return (
<div className="App">
<p>{name}</p>
<div>
<Child nameRef={nameRef} />
<button type="button" onClick={submitButton}>
Submit
</button>
</div>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);