如何将回调函数参数传递给父反应组件？

Question

只是想知道将 letterSelected 传递到 useLazyQuery fetchMovies 查询的最佳方法，这样我就不必使用静态变量“A”。我希望有一种方法可以将它直接传递给 fetchMovies。 useLazyQuery 是一个 apollo 查询。

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

Answer 1

这似乎是 Lifting State Up 解决的问题。 useLazyQuery 采用 gql 查询和选项，returns 用于稍后执行查询的函数。听起来您希望子组件更新 variables 配置参数。

浏览电影

移动firstLetter状态BrowseMovies组件
从状态
更新查询parameters/options/config
添加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>
   )
 }

如何将回调函数参数传递给父反应组件？

How to pass callback function parameters to parent react component?

javascript

apollo

reactjs