React子组件向父组件传递useState setter的相关问题

嘿，我来帮你解答这两个React组件状态传递的问题～

第一个问题：共享子组件的useState setter是不是好方法？ #

其实更推荐的是把状态提升到父组件，而不是从子组件传递setter给父组件。这更符合React的单向数据流设计原则：状态应该放在需要使用它的最上层组件中——你的父组件里有控制滑块开关的按钮，滑块组件本身也需要依赖isOpen状态渲染，所以父组件才是持有这个状态的最佳位置。

这种方式的优势很明显：所有和滑块开关相关的状态操作都集中在父组件，逻辑更清晰，后续追踪状态变化、排查问题都会更方便，代码的可维护性也更高。

第二个问题：如果要从子组件传递setter给父组件，该怎么做？ #

虽然不推荐这种方式，但如果有特殊场景（比如子组件需要独立管理状态的内部逻辑，同时父组件需要介入控制），可以通过props传递回调函数来实现：

方式1：推荐的状态提升写法（优先使用） #

import { useState } from 'react';

function Parent() {
  // 将isOpen状态放在父组件
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>  
      {/* 父组件直接使用setIsOpen控制状态 */}
      <button onClick={() => setIsOpen(true)}>打开滑块</button>
      {/* 把状态和setter通过props传给子组件 */}
      <Slider isOpen={isOpen} setIsOpen={setIsOpen} />
    </>
  )
}

function Slider({ isOpen, setIsOpen }) {
  // 子组件无需自己维护状态，直接使用父组件传入的状态和setter
  return (
    <div className={`slider-container ${isOpen ? 'open' : 'closed'}`}>
      {/* 滑块内部的关闭按钮 */}
      <button onClick={() => setIsOpen(false)}>关闭滑块</button>
      {/* 其他滑块内容 */}
      {isOpen && <div className="slider-content">我是滑块内容</div>}
    </div>
  )
}

方式2：子组件传递setter给父组件（特殊场景备选） #

import { useState, useEffect } from 'react';

function Parent() {
  // 存储子组件传来的setter
  const [sliderSetIsOpen, setSliderSetIsOpen] = useState(null);

  return (
    <>  
      {/* 调用前先判断setter是否存在，避免报错 */}
      <button onClick={() => sliderSetIsOpen && sliderSetIsOpen(true)}>打开滑块</button>
      {/* 传递回调函数接收子组件的setter */}
      <Slider onSetIsReady={setSliderSetIsOpen} />
    </>
  )
}

function Slider({ onSetIsReady }) {
  const [isOpen, setIsOpen] = useState(false);

  // 组件挂载时，把setter通过回调传给父组件
  useEffect(() => {
    onSetIsReady(setIsOpen);
    // 清理函数：组件卸载时清空父组件中的setter，防止内存泄漏
    return () => onSetIsReady(null);
  }, [onSetIsReady]);

  return (
    <div className={`slider-container ${isOpen ? 'open' : 'closed'}`}>
      <button onClick={() => setIsOpen(false)}>关闭滑块</button>
      {isOpen && <div className="slider-content">我是滑块内容</div>}
    </div>
  )
}

总结一下，优先选择状态提升的方式，它更符合React的设计理念，代码也更简洁可靠。只有在子组件必须独立管理状态的特殊情况下，再考虑传递setter的方案。

备注：内容来源于stack exchange，提问作者lcsaloon