innerRef 被完全忽略

Question

我运行遇到了一个问题，我在组件上的 innerRef 道具被完全吞没了，而且从来没有运行。

这是我的组件实现的样子：

<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。但是如果我在我的 ref setter 中放置一个日志，它永远不会被调用。

唯一特别的是组件被呈现为 React 16 Portal 的子组件。也就是说，我刚刚测试了将门户从树中拉出，我得到了相同的结果。

Answer 1

我解决了这个问题，归根结底这是一堂课，所以我想我会提供我的解决方案。

事实证明，在我的树的更高层，我使用 "innerRef" 的方式是使用 {...styledProps}

级联到 children

我学到的是 innerRef 应该只在直接样式化的组件上用作道具名称。如果不是直接样式化的组件，它应该永远是 ref（当与 HTML 元素交互时），或者除 innerRef 之外的名称（当对哪个元素进行任何特殊操作时）参考处理程序。

innerRef 被完全忽略

innerRef getting completely ignored

styled-components