如何在React中设置嵌套组件的样式？

debugcn 发表于 Dev

Dom355

我使用嵌套组件对目录进行了编码。每个组件都是标题列表。

我想用缩进效果（左边距：“ 20px”）为每个组件设置样式，以区分嵌套的每个级别。

例：

<Parent> 
-->indent <Child/>
 -->indent   <Child2/>
   -->indent    (etc.)
</Parent>

是否知道如何动态执行此操作？

这是我的代码：

import React from "react";

const TocContent = ({ props }) => {
    return (
        <div className="TOC">
            {props.TOC.map((header) => (
                <HeaderList key={header.objectId} header={header} props={props} />
            ))}
        </div>
    );
};

const HeaderList = ({ header, props }) => {
    return (
        <div>
            <li
                onMouseDown={(e) => e.stopPropagation()}
                className="listing"
                style={{}}
                onClick={(e) =>
                    props.handleHeaderClick(
                        header.level,
                        header.treepath,
                        header.containsLaw,
                        header.sections,
                        header.secNum,
                        header.objectId,
                        header.id,
                        e.stopPropagation(),
                    )
                }
            >
                {header._id}
            </li>
            {/* // if savedIndex === CurrentParent Index */}
            {props.headerIndex === header.objectId &&
                props.headers2.map((node2) => (
                    <HeaderList key={node2.objectId} header={node2} props={props} />
                ))}
            {props.headerIndex2 === header.objectId &&
                props.headers3.map((node3) => (
                    <HeaderList key={node3.objectId} header={node3} props={props} />
                ))}
            {props.headerIndex3 === header.objectId &&
                props.headers4.map((node4) => (
                    <HeaderList header={node4} key={node4.objectId} props={props} />
                ))}
        </div>
    );
};

export default TocContent;

亨利·伍迪

在同时包含HeaderList主要内容和子内容的元素上放置边距（或填充）HeaderList（而不是像现在一样仅包含主要内容）。具体来说，这就是div将所有其他返回的内容包装在HeaderList组件中的。边距将堆积起来，每个嵌套的标题列表将比父标题缩进更多。

例如（仅HTML和CSS）：

.header-list {
  margin-left: 20px;
}

<div class="header-list">
  First Element
  <div class="header-list">
    Second Element
    <div class="header-list">
      Third Element
    </div>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。