React中如何将useState状态传递给其他JSX组件？

两种常用实现方式，根据你的组件嵌套复杂度选择即可：

方案1：Props 传递（适合嵌套层级少的简单场景） #

核心逻辑是把状态提升到按钮组件、模态框组件的最近公共父组件，再通过props把状态和修改方法分别传给需要的子组件，这是React最基础也最推荐的简单场景传值方式。

1. 把原本写在单组件里的showModal状态挪到公共父组件中

   // 公共父组件 例如 MovieDetail.jsx
   import { useState } from 'react';
   import TrailerModal from './TrailerModal';
   import WatchTrailerBtn from './WatchTrailerBtn';
   
   export default function MovieDetail() {
     const [showModal, setShowModal] = useState(false);
     const openTrailerModal = () => setShowModal(true);
     const closeTrailerModal = () => setShowModal(false);
   
     return (
       <div className="movie-detail-page">
         {/* 其他电影详情内容 */}
         <WatchTrailerBtn onOpen={openTrailerModal} />
         <TrailerModal isOpen={showModal} onClose={closeTrailerModal} />
       </div>
     )
   }
   

2. 按钮组件接收props传入的打开方法，绑定到点击事件

   // WatchTrailerBtn.jsx
   export default function WatchTrailerBtn({ onOpen }) {
     return (
       <button
         type="button"
         onClick={onOpen}
         className="my-4 border text-white py-2 px-4 rounded-3xl border-blue-600 bg-blue-600 shadow-lg"
       >
         Watch trailer
       </button>
     )
   }
   

3. 模态框组件接收props传入的状态和关闭方法，做条件渲染

   // TrailerModal.jsx
   export default function TrailerModal({ isOpen, onClose }) {
     if (!isOpen) return null;
     return (
       <div className="modal-mask" onClick={onClose}>
         <div className="modal-content" onClick={e => e.stopPropagation()}>
           {/* 预告片播放内容 */}
           <button onClick={onClose} className="close-btn">×</button>
         </div>
       </div>
     )
   }
   

方案2：Context 全局传递（适合嵌套层级深、多组件共用状态的场景） #

如果按钮和模态框隔了很多层组件，逐层传props太繁琐，可以用React Context做跨层级传值，不用每一层都手动接props再往下传。

1. 先创建模态框对应的Context和自定义hook

   // TrailerModalContext.js
   import { createContext, useContext, useState } from 'react';
   
   const TrailerModalContext = createContext(null);
   
   export function TrailerModalProvider({ children }) {
     const [showModal, setShowModal] = useState(false);
     const openModal = () => setShowModal(true);
     const closeModal = () => setShowModal(false);
   
     return (
       <TrailerModalContext.Provider value={{ showModal, openModal, closeModal }}>
         {children}
       </TrailerModalContext.Provider>
     )
   }
   
   // 自定义hook，子组件直接调用就能拿状态和方法
   export function useTrailerModal() {
     return useContext(TrailerModalContext);
   }
   

2. 在两个组件共同的外层根组件上包裹Provider

   // 例如 App.jsx
   import { TrailerModalProvider } from './TrailerModalContext';
   import MovieDetail from './MovieDetail';
   
   function App() {
     return (
       <TrailerModalProvider>
         {/* 其他路由、全局组件 */}
         <MovieDetail />
       </TrailerModalProvider>
     )
   }
   

3. 任意层级的子组件都可以直接调用hook拿方法，不用逐层传props
   • 按钮组件内调用：

     import { useTrailerModal } from './TrailerModalContext';
     
     export default function WatchTrailerBtn() {
       const { openModal } = useTrailerModal();
       return (
         <button
           type="button"
           onClick={openModal}
           className="my-4 border text-white py-2 px-4 rounded-3xl border-blue-600 bg-blue-600 shadow-lg"
         >
           Watch trailer
         </button>
       )
     }
     

   • 模态框组件内调用：

     import { useTrailerModal } from './TrailerModalContext';
     
     export default function TrailerModal() {
       const { showModal, closeModal } = useTrailerModal();
       if (!showModal) return null;
       return (
         <div className="modal-mask" onClick={closeModal}>
           <div className="modal-content" onClick={e => e.stopPropagation()}>
             {/* 预告片播放内容 */}
           </div>
         </div>
       )
     }
     

选型建议 #

• 组件嵌套在2层以内，优先用Props传值，逻辑更直观，调试成本低
• 跨3层以上传递、或者多个不相关组件都需要控制同一个预告片模态框，再用Context方案
• 记得补充模态框的关闭逻辑：点击遮罩、点击关闭按钮、按下ESC键时都要触发关闭方法，避免出现模态框无法关闭的问题

内容的提问来源于stack exchange，提问作者Cadz27