javascript - 如何将回调函数参数传递给父反应组件?
问题描述
只是想知道将 letterSelected 传递给 useLazyQuery fetchMovies 查询的最佳方法,这样我就不必使用“A”的静态变量。我希望有一种方法可以将它直接传递给 fetchMovies。useLazyQuery 是一个阿波罗查询。
const BrowseMovies = () => {
const [fetchMovies, { data, loading}] = useLazyQuery(BROWSE_MOVIES_BY_LETTER, {
variables: {
firstLetter: "A"
}
})
return (
<div className="browserWrapper">
<h2>Browse Movies</h2>
<AlphabetSelect
pushLetterToParent={fetchMovies}
/>
{
data && !loading &&
data.browseMovies.map((movie: any) => {
return (
<div className="browseRow">
<a className="movieTitle">
{movie.name}
</a>
</div>
)
})
}
</div>
)
}
export default BrowseMovies
const AlphabetSelect = ({pushLetterToParent}: any) => {
const letters = ['A','B','C','D','E','F','G','H','I','J','K','L', 'M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','#']
const [selectedLetter, setSelectedLetter] = useState("A")
const onLetterSelect = (letter: string) => {
setSelectedLetter(letter.toUpperCase())
pushLetterToParent(letter.toUpperCase())
}
return (
<div className="alphabetSelect">
{
letters.map((letter: string) => {
return(
<div
className={selectedLetter === letter ? 'letterSelectActive' : 'letterSelect'}
onClick={() => onLetterSelect(letter)}
>
{letter}
</div>
)
})
}
</div>
)
}
export default AlphabetSelect
解决方案
这似乎是Lifting State Up解决的问题。useLazyQuery
接受一个 gql 查询和选项,并返回一个函数以在以后执行查询。听起来您希望子组件更新variables
配置参数。
浏览电影
移动
firstLetter
状态BrowseMovies
组件从状态更新查询参数/选项/配置
添加
useEffect
以在状态更新时触发获取firstLetter
将状态和状态更新器传递setFirstLetter
给子组件const BrowseMovies = () => { const [firstLetter, setFirstLetter] = useState(''); const [fetchMovies, { data, loading}] = useLazyQuery( BROWSE_MOVIES_BY_LETTER, { variables: { firstLetter } } // <-- pass firstLetter state ); useEffect(() => { if (firstLetter) { fetchMovies(); // <-- invoke fetch on state update } }, [firstLetter]); return ( <div className="browserWrapper"> <h2>Browse Movies</h2> <AlphabetSelect pushLetterToParent={setFirstLetter} // <-- pass state updater selectedLetter={firstLetter} // <-- pass state /> { data && !loading && data.browseMovies.map((movie: any, index: number) => { return ( <div key={index} className="browseRow"> <a className="movieTitle"> {movie.name} </a> </div> ) }) } </div> ) }
字母选择
将
pushLetterToParent
回调附加到div
的onClick
处理程序const AlphabetSelect = ({ pushLetterToParent, selectedLetter }: any) => { const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ#'; return ( <div className="alphabetSelect"> { letters.split('').map((letter: string) => { return( <div key={letter} className={selectedLetter === letter ? 'letterSelectActive' : 'letterSelect'} onClick={() => pushLetterToParent(letter.toUpperCase())} > {letter} </div> ) }) } </div> ) }
推荐阅读
- wordpress - 我如何知道在 GCP 上运行一个低流量的 WordPress 网站需要多少费用?
- c++ - 在 CPP 文件中放置类成员函数的 C++ 模板定义,并允许使用 IMPLICIT 实例化而不是 .H?
- python - 如何在arcpy中的要素类内添加具有XY坐标的点?
- javascript - SideNav 覆盖一切
- java - 按 id 显示单行 - spring mvc
- c++ - 为一个类实现 Boost::Asio 的行为
- javascript - 无法在 php 中回显 ajax .load 函数
- firebase - 是否可以在云 Firestore 上查询字段并获取主集合字段并使用子集合文档获取子集合?
- ios - 在 ChildView 中预览 Core Data 实体
- html - 基于单击 Vuejs 中的按钮显示/隐藏警报