Question

我有一个称为Collapsible的手风琴组件。它使子代的显示和隐藏具有动画效果。如果子内容的大小是静态的，则效果很好，但是我的应用程序不能依赖于此，因为某些子组件具有自己的条件性子组件呈现。我意识到我可以传递setState函数来触发重新提交，但是我希望孩子们对他们是否在Collapsible内不了解。

我能想到的一个解决方案是为此重新渲染触发器向每种子组件添加一个可选的道具，但如果没有其他方法，我会首选 -一种可以让孩子真正了解父母的东西。

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

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>
      </>
  );
};

Answer 1

如果在打开时将max-height更改为none而不是固定的px值，则它将自动扩展以适合内容。

const maxHeight = open ? 'none' : '0px';

React父级布局取决于子级（必须重新渲染子级）

1 个答案: