React/Next.js中实现子组件触发父组件状态更新

问题根源 #

1. Imprint组件props接收错误：当前组件参数写为status，但Footer传递的是onClose属性，未正确获取父组件传递的回调函数。
2. 未定义函数调用：Imprint组件内调用了不存在的setStatus函数，应该使用父组件传入的onClose回调。
3. JSX语法错误：Footer组件中第二个条件渲染的括号未闭合，导致代码无法正常解析。

修正后的代码 #

Footer组件

const Footer = () => {
  const [status, setStatus] = useState<'close' | 'open'>('close')
  const openImprint = () => {
    setStatus('open')
  }

  const closeImprint = () => {
    setStatus('close')
  }
  
  return (
    <>
      {status === 'open' && <Imprint onClose={setStatus} />}
      {status === 'close' && (
        <div>
          <a onClick={openImprint}>xx</a>
        </div>
      )}
    </>
  )
}

Imprint组件

const Imprint = ({ onClose }) => {
  return (
    <div className={styles.close} onClick={() => onClose('close')}>
      close
    </div>
  )
}

修正说明 #

• Imprint组件通过解构赋值获取父组件传递的onClose（即Footer的setStatus函数），点击关闭按钮时直接调用onClose('close')更新Footer的状态。
• 修复了Footer组件中未闭合的JSX标签，确保代码语法合法。

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