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

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 BrowseMoviesconst 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 查询和选项并返回一个函数以稍后执行查询。听起来您希望子组件更新variables配置参数。

浏览电影

1. 移动firstLetter状态BrowseMovies组件

2. 从状态更新查询参数/选项/配置

3. 添加useEffect状态更新时触发获取

4. 将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>

   )

 }