Reactjs React父布局取决于子布局（如果子布局存在，则必须重新渲染）

我有一个手风琴组件，我称之为可折叠的。它使孩子们的暴露和隐藏充满活力。如果子内容的大小是静态的，它会非常有效，但我的应用程序不能依赖于此，因为有些子组件有自己的子组件的条件呈现。我意识到我可以传递一个

setState

函数来触发重新渲染器，但我更希望孩子们能够不知道他们是否在可折叠的

中

我能想到的一个解决方案是为这种重新渲染触发器的每种子组件添加一个可选的道具，但我更希望有其他我看不到的方式——一种让孩子们真正不知道他们父母的方式

以下是手风琴组件（带有TypeScript类型注释）：

constcollapsable=（{open，label，handleClick，children}:Props）：ReactElement=>{
const contentRef=useRef（null）；
const contentClassName=open？`${styles.content}${styles.open}`:styles.content；
const arrowClassName=open？`${styles.arrow}${styles.open}`:styles.arrow；
const maxHeight=open？contentRef.current？scrollHeight+'px'：'0px'；
返回(
{label}
{儿童}
);
};
如果打开时将
max height
更改为
none
而不是固定的px值，则它应该自动展开以适合内容

const maxHeight=open？“无'：'0px'；
React组件实际上只需要在其状态或道具更新时重新渲染。如果子代发生在重新渲染器上，为什么父组件需要重新渲染器？是否可以允许
子对象的包含div自动增长以适合子对象？几乎100%的情况下，如果你认为解决react问题的办法是让孩子强迫父母重新提交你在设计上偏离了方向。好主意。很明显，我在提出我的问题时走错了路——这实际上是关于css而不是反应。显然我需要一些睡眠。谢谢
const Collapsible = ({ open, label, handleClick, children }: Props): ReactElement => {
  const contentRef = useRef<HTMLDivElement>(null);

  const contentClassName = open ? `${styles.content} ${styles.open}` : styles.content;
  const arrowClassName = open ? `${styles.arrow} ${styles.open}` : styles.arrow;

  const maxHeight = open ? contentRef.current?.scrollHeight + 'px' : '0px';

  return (
      <>
          <div className={styles.div} onClick={handleClick}>
              <span className={styles.label}>{label}</span>
              <button className={styles.button}>
                  <span className={arrowClassName}></span>
              </button>
          </div>
          <div ref={contentRef} style={{ maxHeight }} className={contentClassName}>
              {children}
          </div>
      </>
  );
};