我想將我在此事件中收集的變數“同義詞”發送到另一個組件。該組件沒有直接鏈接到這個組件，它實際上是父級的父級。
理想情況下，這個詞會更新另一個組件的狀態，這樣我就可以用這個新詞再次運行 API。
export default function Synonym(props) {
function searchSynonym(event) {
let synonym = event.target.innerHTML;
}
if (props.synonyms.length > 0) {
return (
<div className="Synonym">
{props.synonyms.map((word, index) => {
if (index < 10) {
return (
<button
key={index}
className="synonym-word"
onClick={searchSynonym}
>
{word}
</button>
);
} else return null;
})}
</div>
);
} else return null;
}
完整代碼在GitHub上開源。我要發送單詞的組件是 Search.js
提前謝謝你，我對 React 很陌生！
uj5u.com熱心網友回復：
子組件向父組件傳遞資料的流程如下：
- 在父組件中創建回呼函式。將使用此回呼函式從子組件中檢索資料。
- 作為來自父組件的道具，將回呼函式傳遞給子組件。
- 子組件使用 props 呼叫父回呼函式，將資料回傳給父組件。
在您的情況下，直接而簡單的解決方案是在要使用“同義詞”的搜索組件中創建一個回呼函式，然后將該函式作為道具傳遞給定義組件，然后再次將其傳遞給同義詞組件。
像下面這樣！
在 Search Component 中創建同義詞 useState 并創建 getSynonym 回呼函式，將其作為 prop 傳遞給 Definitions 組件。
export default function Search() {
const [keyword, setKeyword] = useState("");
const [result, setResult] = useState(null);
const [photos, setPhotos] = useState(null);
const [synonym, setSynonym] = useState(null);
const getSynonym = (value) =>{
setSynonym(value)
}
{....}
return (
<div className="Search">
<form onSubmit={handleSearch}>
<input className="input" type="search" onChange={updateCity} />
</form>
<Definitions data={result} getSynonym={getSynonym}/>
<Pictures data={photos} />
</div>
);
}
在 Definations 組件中，再次將回呼函式傳遞給 Synonym 組件。
export default function Definitions(props) {
{...}
return (
{...}
<Synonym synonyms={meaning.definitions[0].synonyms} getSynonym={props.getSynonym} />
{...}
);
}
在 Synonym 組件中呼叫回呼函式。
export default function Synonym(props) {
function searchSynonym(event) {
let synonym = event.target.innerHTML;
props.getSynonym(synonym)
}
{...}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/406315.html
標籤：