Question

我遇到了一个关闭问题，我的内部异步道具已被完全吞噬，从未跑过。

以下是我的组件实现：

<StyledPopOver
  innerRef={el => (this.popOverEl = el)}
  transitionState={transitionState}
  animationTiming={animationTiming}
  style={this.getAnchorPosition()}
  {...styledProps}
>
  {children}
</StyledPopOver>

以下是样式组件定义的样子：

const StyledPopOver = styled.div`
  display: table-cell;
  transform-origin: top;
  transition-property: all;
  position: fixed;
  z-index: 9998;

  opacity: 0;
  transform: scaleY(0);

  ${props => {
    switch (props.transitionState) {
      case ENTERING:
        return css`
          opacity: 1;
          transform: scaleY(1);
          transition-duration: ${passedProps =>
            passedProps.animationTiming.enter}ms;
        `
      case ENTERED:
        return css`
          opacity: 1;
          transform: scaleY(1);
        `
      case EXITING:
        return css`
          transition-duration: ${passedProps =>
            passedProps.animationTiming.exit}ms;
        `
      default:
        return null
    }
  }};
`

如果我记录传递给样式组件的道具，我可以看到innerRef。但是如果我在我的引用设置器中放入一个日志，它就永远不会被调用。

唯一特别之处在于该组件被渲染为React 16 Portal的子级。也就是说，我刚测试将门户拉出树，我得到了相同的结果。

Answer 1

我想出了这个，并且在一天结束时这是一个教训，所以我想我会提供我的解决方案。

事实证明，在我的树上更高，我正在使用＆＃34; innerRef＆＃34;以一种使用{...styledProps}

级联到儿童的方式

我学到的是innerRef应该只用作直接样式组件的道具名称。如果不是直接样式化组件，它应该只是ref（与HTML元素交互时）或innerRef以外的名称（当对哪个元素获取引用处理程序做任何特殊操作时。< / p>

innerRef被完全忽略

1 个答案: