无法根据另一个组件的状态获取要呈现的组件的复选框

import React from 'react';

const ComponentA = (props) => {
  const { showCheckbox } = props;

  return (
    <div>
      {/* 其他组件内容 */}
      {showCheckbox && <input type="checkbox" />}
    </div>
  );
};

export default ComponentA;

import React, { useState, useEffect } from 'react';

const ComponentB = () => {
  const [showCheckbox, setShowCheckbox] = useState(false);

  // 模拟状态更新事件触发
  const updateStatus = () => {
    setShowCheckbox(!showCheckbox);
  };

  useEffect(() => {
    // 监听状态更新事件
    document.addEventListener('statusUpdated', updateStatus);

    // 组件卸载时移除监听器
    return () => {
      document.removeEventListener('statusUpdated', updateStatus);
    };
  }, []);

  return (
    <div>
      {/* 其他组件内容 */}
      <button onClick={() => { document.dispatchEvent(new Event('statusUpdated')); }}>更新状态</button>
      {showCheckbox && <input type="checkbox" />}
    </div>
  );
};

export default ComponentB;