Meth0d's questions

我有一个一维视图实体数组

[
  {
    id: number
    parentId: number
    type: string
    name: string
  }
]

我想把它分解成React中的组织结构，所以 因此，parentId 与标记中另一个元素的 id 匹配的元素将成为其后代。该结构的最大深度为 4。我尝试在字段中的每个元素中使用嵌套数组进行布局children- 原则上，一切正常，但我们有复杂性n^4。结构最终应该是这样的：

<div id="1" class="wrapper">
    <div class="item"></div>
    <div class="row">
        <div id="2" parent-id="1" class="wrapper">
            <div class="item"></div>
        </div>
        <div id="3" parent-id="1" class="wrapper">
            <div class="item"></div>
            <div class="row">
                <div id="4" parent-id="3" class="wrapper">
                    <div class="item"></div>
                </div>
            </div>
        </div>
    </div>
</div>

数组示例：

[
  {
    "id": 1,
    "parentId": 0,
    "type": "main",
    "name": "Генеральный директор"
  },
  {
    "id": 2,
    "parentId": 1,
    "type": "section",
    "name": "Отдел найма"
  },
  {
    "id": 3,
    "parentId": 1,
    "type": "section",
    "name": "Отдел обучения"
  },
  {
    "id": 4,
    "parentId": 1,
    "type": "section",
    "name": "Отдел создания контента"
  },
  {
    "id": 5,
    "parentId": 3,
    "type": "section",
    "name": "Отдел создания контента"
  },
  {
    "id": 6,
    "parentId": 5,
    "type": "section",
    "name": "Отдел создания контента"
  }
]

该组件有几个填充内容的异步调度：

    useEffect(() => {
        dispatch(fetchAllItems())
        dispatch(fetchAllPositions())
        dispatch(fetchAllUsers())
    }, [])

然后我挂在 ref 元素上：

    const mainRef = useRef<HTMLDivElement>(null)

然后尝试获取相同元素的高度useEffect：

    mainRef.current && console.log(mainRef.current.clientHeight)

因此，0 被返回到控制台。据我了解，这正是由于调度而发生的 - 当元素还没有时间填充内容时就获取了元素的高度。

问题：我到底什么时候可以获得填充元素的高度？据我了解，我们必须等到所有调度完成，告诉我如何实现这个

整个组件：

import {FC, useEffect, useRef, useState} from 'react'
import cn from 'classnames'
import {fetchAllItems, fetchAllUsers, fetchAllPositions, useAppDispatch, useAppSelector} from '_store'
import {OrgHeader} from 'widgets/OrgHeader'
import {OrgItem} from 'widgets/OrgItem'
import s from './OrgPage.module.scss'

export interface OrgPageProps {
    className?: string
}

export const OrgPage:FC<OrgPageProps> = ({className}) => {
    const dispatch = useAppDispatch()
    const {items, positions} = useAppSelector(state => state.orgItems)

    const {scale} = useAppSelector(state => state.orgHeader)
    const startRef = useRef<HTMLDivElement>(null)

    const [mainHeight, setMainHeight] = useState(0)
    const mainRef = useRef<HTMLDivElement>(null)

    useEffect(() => {
        dispatch(fetchAllItems())
        dispatch(fetchAllPositions())
        dispatch(fetchAllUsers())

        if (mainRef.current) {
            setMainHeight(mainRef.current.clientHeight)
        }
    }, [])

    return (
        <div className={cn(s.orgPage, [className])}>
            {mainHeight}
            <OrgHeader className={s.header}/>
            <div className={s.main} ref={mainRef}>
                <div className={s.start} ref={startRef}>
                    {items.map(item => {
                        const itemPositions = positions.find(position => position.item_id === item.id)
                        if (!itemPositions) return

                        return (
                            <OrgItem
                                key={item.id}
                                name={item.name}
                                id={item.id}
                                administration={item.administration}
                                positions={itemPositions}
                            />
                        )
                    })}
                </div>
            </div>
        </div>
    )
}

再会。我不知道如何制作这样的块。主要问题是他有一个影子，即 半圆应该是完全透明的，它们也应该有阴影。也不可能抛出背景，因为元素是下拉的。

问题：如何去掉框架左下角的这个链接按钮？

我有一个由我设计的自定义播放器。通过单击进度条，可以倒带音频文件。我还想这样做，以便在拖动滑块时，音频文件被倒带。因此，从视觉上看，它无法从容器中拉出。我也想知道如果没有 , 是否可以做到这一点input，因为。我最初没有使用它。拖动时跟踪什么事件也很有趣。一个非常简单的例子来说明如何做到这一点就足够了。

这是一个示例https://jsfiddle.net/dftx5b8n/

.range {
  width: 200px;
  height: 10px;
  border-radius: 12px;
  background-color: darksalmon;
}
.line {
  width: 30%;
  height: 10px;
  border-radius: 12px;
  background-color: aquamarine;
  position: relative;
}
.circle {
  position: absolute;
  right: -7px;
  top: -3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #f7f8fa;
  border: 2px solid blue;
}

<div class="range">
  <div class="line">
    <div class="circle"></div>
  </div>
</div>

有这样的代码。块一个接一个地打开。我怎样才能让它们以相反的顺序关闭？

function display(el) {
  $(el).next('.hidden__wrapper').fadeToggle(300, function(){
    $(this).next().fadeToggle(300, arguments.callee);
  })
}

.block {
  cursor: pointer;
  color: #fff;
  width: 500px;
  height: 50px;
  background-color: #333;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 20px;
}
.hidden {
  width: 500px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 20px;
}
.hidden-one {
  background-color: darksalmon;
}
.hidden-two {
  background-color: darkslategrey;
}
.hidden-three {
  background-color: darkolivegreen;
}
.hidden__wrapper {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div onclick="display(this)" class="block">Раскрыть</div>
  <div class="hidden__wrapper">
    <div class="hidden hidden-one">One</div>
  </div>
  <div class="hidden__wrapper">
    <div class="hidden hidden-two">Two</div>
  </div>
  <div class="hidden__wrapper">
    <div class="hidden hidden-three">Three</div>
  </div>
</div>

我在 WebStorm 中使用 gulp 程序集，特别是 gulp-file-include 和 gulp-autoprefixer 插件。有两个问题：

1. 当您使用 gulp-file-include 插件中的 @@include 时，会发生以下情况：

2. 当你在 gulp-autoprefixer 中使用 grid: true 参数时，前缀会放在最终的 css 文件中的网格之前，它们也用红色下划线：

如何解决？建议不要将 WebStorm 更改为另一个 IDE

主要有3条线路。通过点击主线，之前隐藏的列表退出，--active类叠加在上面，opacity类应用到其余的主线。问题是，如果您打开另一条主线，则 opacity 类开始在活动线上重叠并在第三行崩溃（在示例中您可以看到发生了什么）。建议一种算法来避免这种情况。应该可以一次打开多个选项卡，当您关闭所有选项卡时，一切都应该恢复到默认状态。

https://jsfiddle.net/6dgxv74n/

不幸的是，我不知道如何添加 jquery 代码，所以工作示例在链接中

.main {
  padding: 5px 10px;
  background-color: #fff;
  border: 1px solid #333;
  border-radius: 12px;
}

.main--active {
  background-color: #ccc;
}
.opacity {
  opacity: 0.4;
}

<div class="main">main row</div>
  <ul class="hidden">
    <li>subrow</li>
    <li>subrow</li>
    <li>subrow</li>
    <li>subrow</li>
  </ul>
<div class="main">main row</div>
  <ul class="hidden">
    <li>subrow</li>
    <li>subrow</li>
    <li>subrow</li>
    <li>subrow</li>
  </ul>
<div class="main">main row</div>
<ul class="hidden">
  <li>subrow</li>
  <li>subrow</li>
  <li>subrow</li>
  <li>subrow</li>
</ul>

问题是链接不仅在悬停时发生变化，而且只是在页面刷新时发生变化。那些。最初它们是蓝色的，然后逐渐变成灰色并从身体获得体积和高度。

body {
  font-family: 'Kanit', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  color: #070707;
}

.menu__list {
  display: flex;
  justify-content: space-between;
}

.menu__list-link {
  text-decoration: none;
  color: #828282;
  transition: all 1.5s;
}

.menu__list-link:hover {
  color: #070707;
}

<nav class="menu">
  <ul class="menu__list">
    <li class="menu__list-item">
      <a class="menu__list-link" href="#">Home</a>
    </li>
    <li class="menu__list-item">
      <a class="menu__list-link" href="#">About me</a>
    </li>
    <li class="menu__list-item">
      <a class="menu__list-link" href="#">Skills</a>
    </li>
    <li class="menu__list-item">
      <a class="menu__list-link" href="#">Portfolio</a>
    </li>
    <li class="menu__list-item">
      <a class="menu__list-link" href="#">Contacts</a>
    </li>
  </ul>
</nav>

我不知道有什么问题？在另一个项目中，在类似的情况下，一切正常。我也不能google，因为我不知道如何简要描述这个问题。

视频链接