小编McD*_*erp的帖子

我有一个具有功能的组件handleAdd。该函数调用一个库，该库又调用axios并返回一个承诺。一旦解决了，该handleAdd()方法就会更新组件状态，进而渲染子组件。

换句话说，它首先检查服务器以确保在本地显示该项目之前已添加该项目。

使用 Jest 进行测试时，我必须在 Expect 运行之前等待睡眠几毫秒，否则即使我模拟/覆盖 api 调用，浅层渲染尚未更新。在 Promise 解析、重新渲染和 Expect() 之间存在一些延迟。这是这样的：

it('adds a thing', async () => {
    ThingManager.default.addPlan = () => {
      const response = new Promise((resolve, reject) => { resolve() })
      return response;
    }

    const wrapper = shallow(<Home />)
    wrapper.find('button').simulate('click')
    const input = wrapper.find('#plan-title')
    input.simulate('change', { target: { value: 'TEST ITEM' } })

    await sleep(500) // without it, <Thing /> isn't rendered yet.

    expect(wrapper.find('Thing').length).toBe(1)
  });

这样做的正确方法是什么？

我有以下功能，通过每次“勾选”调整元素的样式，将某些元素“向上”滚动到视图之外：

const incr = 1;
let moved = 0;

function changeHeight( children, duration, setTop) {
  // duration = 1500
  const height = children.clientHeight; // in this case, 166px

  let moved = 0; 
  const slideUp = function (timestamp) {
    // we're done if the amount moved is larger than height
    if ( moved < height ) { 
      children.style.top = `${ setTop( moved, height ) }px`;
      moved = moved + incr // move by some amount

      requestAnimationFrame(slideUp) 

    } else {
      // reset …

tl;dr - 如何通过跟踪强制重新渲染仅一个特定的子组件ref？

我有一个行表。我希望能够将鼠标悬停在行上并显示/隐藏行中的单元格，但只能在一段时间之后。

您只能在将鼠标悬停在整个表格上一段时间后（由onMouseEnter和触发）才能显示隐藏的悬停内容onMouseLeave。

一旦将鼠标悬停在特定的 上<Row>，如果父级允许，它应该显示额外的内容。

鼠标悬停在表格上的顺序：

1. 将鼠标悬停在行上
2. 行isHovered现在是true
3. 在 1000ms 内，allowHover更改为true
4. 由于allowHover和isHovered都是true，显示额外的行内容

鼠标移出表格的顺序：

1. 鼠标移动到父容器/表/行之外
2. 之前悬停的行isHovered设置为false
3. 先前悬停的行的隐藏内容被隐藏
4. 在 1000ms 内，allowHover更改为false

此时，如果重新进入表，我们必须再次等待1秒才为allowHover真。一旦 和 都isHovered为allowHover真，则显示隐藏内容。一旦允许悬停，就不会有任何延迟：悬停在其上的行应立即显示隐藏的内容。

我试图useRef避免改变行父行的状态并导致所有子行的重新渲染

在行级别，悬停时，行应该能够检查是否允许悬停，而无需使用 props 重新渲染整个列表。我假设useEffect可以设置为跟踪该值，但它似乎不会在单个组件级别触发重新渲染。

换句话说，预期的行为是当前悬停在行上的行检测父级中的更改，并且仅重新渲染自身以显示内容。然后，一旦允许悬停，行为就很简单。将鼠标悬停在行上？揭示其内容。

以下是涉及的代码片段：

function Table() {
  const allowHover = useRef(false);

  const onMouseEnter = (e) => …