React 组件通过自增 padding css 值来渲染子组件

Question

嗨，我正在尝试实现一个用例，其中反应组件通过根据其渲染的嵌套方式自行递增来向样式组件发送一些填充值。 假设有一个 List 组件，它必须使用一些额外的填充来渲染父组件和子组件，因此我已经完成了如下所示的实现，但我不确定 useeffect 和 usestate 的使用在这里会很好。可能会有一些我担心的副作用。 这是列表组件

const Parent = ({ title, children }) => {
  const [padding, setPadding] = useState(0);
  useEffect(() => {
    setPadding(padding + 20);
  }, []);
  
  return (
    <ListStyle padding={padding}>
      <div className="listItemCategory">{title}</div>
      <div className="wrap">
        <div className="listItem">{children}</div>
      </div>
    </ListStyle>
  );
};

这是代码和框链接在此编辑

Answer 1

你可以使用 useRef 和 useLayout ，仅仅 useRef 也可以解决你的问题。

import React, { useLayoutEffect, useRef } from 'react';

const Parent = ({ title, children, padding }) => {
  const nestedPadding = padding.current + 20;

  return (
    <ListStyle padding={nestedPadding}>
      <div className="listItemCategory">{title}</div>
      <div className="wrap">
        <div className="listItem">{children}</div>
      </div>
    </ListStyle>
  );
};

const List = () => {
  const padding = useRef(0);

  useLayoutEffect(() => {
    padding.current += 20;
  }, []);

  return (
    <div>
      <Parent title="Parent" padding={padding} />
    </div>
  );
};

但是，我相信 useState 将是一种直接的方法，因为 useRef 通常用于访问和修改 DOM 元素或跨渲染的持久值，而不是管理组件状态。